How to add Popup



Create popup using fetherlight plugin

# 1 > Action in Controller

In Controller, create the action
->Message can be added and set it to view as a content of the popup

function client_popup(){
$message = "This is the content data. We are passing through controller";
$this->set(compact('message'));

$this->layout = false;
$this->render('d/client_popup');

}

# 2 > Popup action in View

create the action in view

-> Add the Script links needed for featherlight
-> Give a Name to the Modal and add the following code adding href and id for  a link and id and class for the DIV where the content will be shown
-> Echo the $message in inner DIV
-> Call the element passing the modal name where the featherlight script function is added ( In this case "d/popup/v2")

<?php $modalName = "PagePopup"; ?>

<a href="<?= $this->Popup->getLinkHref($modalName); ?>" id="<?= $this->Popup->getLaunchId($modalName); ?>">show message</a>

<div id="<?= $this->Popup->getBodyId($modalName); ?>" class="<?= $this->Popup->getBodyClass($modalName); ?>">
<div class="linkContent">
<!-- Loading... -->
<?= $message; ?>
</div>
</div>

<?= $this->Element('d/popups/v2', array('modalName' => $modalName)); ?>

 


 


# 3 > jquery function in Element

Add the following script in element (v2.ctp)

<script>

$('#<?= $modalName; ?>').featherlight({
targetAttr: 'href',
afterOpen: function(event){
load<?= $modalName; ?>OnOpen();
}

});

</script>

# 4 > popup Helper

Add the following functions in helper to create dynamic href name, id and class

class PopupHelper extends AppHelper {

function getLaunchId($name) {
return $name;
}

function getLinkHref($name) {
return '#'.$name.'content';
}
function getBodyId($name) {
return $name.'content';
}

function getBodyClass($name) {
return "popupContent";
}

function getCloseId($name) {
return "popupContent";
}
}

Other Instructions

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