Question

I am dynamically loading content into my modals, and often it will be a page that is already a normally accessible page on my site.

So I want to be able to reuse that controller/action and load it into my modal but obviously the controller already uses a layout. So when I load the page into my modal, the header and footer of my site is all in the modal again, which I don’t want.

---

One solution I thought of that might work, but seems like a dirty workaround, is to have in my Appcontroller a check for a URL parameter that says it is a modal call for the page (not a regular call). It then overrides the layout with a special modal one.

//app_controller.php

public function beforeRender() {
    if (isset($this->params['passed']['_modal'])) {
        $this->layout = 'modal';
    }
}

// In my jQuery call to open the modal:

myModal.load('users/view/5/_modal').dialog('open');

Then in the modal.ctp layout I would include a stylesheet that looks something like:

// modal_layout.css

@import url("normal_layout.css");

.header, .footer {display:none;}

So I don’t have to redefine all of my normal layout’s CSS but I can just hide the parts I don’t want to show.

This seems like a bit of a stupid method of doing it, and I don’t know if it even works, but surely someone has had to do this before with CakePHP, so what would you guys suggest?

Answer 1

It turned out I didn’t need to anything so complex. I simply created a hidden div in my layout:

<div id="modal"></div>

And then in my layout’s existing CSS I added certain rules to hide elements I don’t want to see when a page is loaded in a modal:

#header, #footer {display:none;}

That way I can load a page into the modal but it still has all the normal styling that is already defined in the layout’s CSS. Pages are loaded into the modal by using their normal CakePHP URL:

$('#modal').load('controller/action/param:whatever').dialog('open');