I’m pretty sure this can be implemented more elegantly, but I’ll describe my attempt to unite Modalbox with CakePHP 1.2.
First example – a modal box view
This example shows the steps I’ve taken to flavour a freshly baked cake app with modalbox. The starting point is a customer model, a controller and some basic index, view and edit views.
Showing a cakephp view in a modalbox, is just a few snippets away. Just make sure you include prototype, scriptaculous and the modalbox javascript and the modalbox css file in the default layout…
/app/views/layouts/default.ctp:
echo $html->css('modalbox');
echo $javascript->link('prototype');
echo $javascript->link('scriptaculous.js?load=effects');
echo $javascript->link('modalbox');
Then create the appropiate link to the view you want to load inside the modalbox. For example, if you want to show customer details from the customers/index.ctp view:
# ...somewhere in the loop that lists customers:
echo $html->link('View', array('action' => 'view', $customer['Customer']['id']), array('title' => 'Customer details', 'onclick' => "Modalbox.show(this.href, {title: this.title, width: 400}); return false;"));
Make sure you use the RequestHandler component so that the customer view is displayed in the ajax.ctp instead of the default.ctp layout. You can do this by making sure the following line is in /app/app_controller.php:
var $components = array('RequestHandler');
And… there you go! When you click the view link, the modalbox slides in, while the rest of the page dims to gray. When you hit the escape button, click the little ‘X’ or click anywhere in the gray area, the modal box slides back where it came from.
Ok, now forms!
(more…)
