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->layout = false;


# 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; ?>

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



# 3 > jquery function in Element

Add the following script in element (v2.ctp)


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



# 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";