How to create a popup



Following step by step instruction will help to create a popup modal and add contents in it.

# 1 > Create Action in Controller

-> create an action in controller - (in this case we use controller ->Pages, prefix -> client and and action -> popup)
-> create and set the data to be passed. ($this->set(compact('message)); )
-> $this->render(directory/prefix_name_action_name.ctp) ($this->render('d/client_popup.ctp)


# 2 > Create View

-> In View->Pages->d, create client_popup.ctp
-> add the following code in client_popup.ctp
->$modelName and labelling can be named as you wish.


<?php $modalName = "PagePopup"; ?>
<?= $this->Element('d/popups/v1', array('modalName' => $modalName)); ?>

<button id="<?= $this->Popup->getLaunchId($modalName); ?>">Show Message</button>



<!-- content of the popup window -->
<?php $div_id = $this->Popup->getBodyId($modalName); ?>
<div id="<?= $div_id; ?>">

<?= $message; ?>
<br>

<button id="<?= $this->Popup->getCloseId($modalName); ?>">Close</button>

</div>

<!-- end of content -->


<script>

function load<?= $modalName; ?>OnOpen() {

//$("#<?= $div_id; ?>").text('this is a test');
// if we are using ajax
// can be added here

}

</script>

# 3 > Helper

Popup Helper:
The Popup helper has been created to create unique ids for the modal.
 class PopupHelper extends AppHelper {


function getLaunchId($name) {
return $name.'modal-launcher';
}

function getBodyId($name) {
return $name.'modal-content';
}

function getCloseId($name) {
return $name.'modal-close';
}
}

 


# 4 > Element

v1 element:
element v1 in d/popup is created with the modal info with scripting and styling

<?php //$modalName = "name";
if (!isset($height)) {
$height = 500;

}
$halfHeight = $height / 2;

if (!isset($display)) {
$display = 'none';
}

?>

<script>

$(function(){
$("#<?= $modalName; ?>modal-launcher, #<?= $modalName; ?>modal-close").click(function () {
//alert('clicked');
$("#<?= $modalName; ?>modal-content").toggleClass("active");

if ($("#<?= $modalName; ?>modal-content,#<?= $modalName; ?>modal-background").hasClass("active")) {
load<?= $modalName; ?>OnOpen();
}
});
});


</script>

<style>
#<?= $modalName; ?>modal-content {
background-color: white;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: <?= $display; ?>;
height: <?= $height; ?>px;
left: 50%;
margin: -<?= $halfHeight; ?>px 0 0 -400px;
padding: 10px;
position: absolute;
top: 50%;
width: 800px;
z-index: 1000;
}

#<?= $modalName; ?>modal-content.active {
display: block;
}
</style>

 


Other Instructions

Below are many other instructions that show you how to use your UpdateCase application