Modal Window Plugin

Registered by Darlene McCullough

A tool to use jQuery to create modal windows would be very useful. Eventually we'd want it for partial symfony forms, but for now just information & tables - we're pretty sure that there are a number of good modal libraries available for jQuery but havent' had the time to figure out how to tie them together with our forms yet.

The easy lift we're thinking of is for the listgroup page in event. When you click on a group now it loads the groupdetail page, which really just displays some facilities and some data (there's no real action) ~ a modal window would be ideal here for displaying that information more elegantly.

Blueprint information

Chad Heuschober
Nils Stolpe
Series goal:
Accepted for mayon
Needs Code Review
Milestone target:
milestone icon 2.0.0
Started by
Darlene McCullough

Related branches



The Agasti team decided to use jQuery UI to implement modal window functionality. Currently, it is being used on the event/listgroups page to display the contents of the event/groupdetail template.

Any templates that will be making use of modal windows (or any other jQuery UI features) should include the following lines:

<?php use_javascript('jquery.ui.custom.js') ?>
<?php use_stylesheet('jquery/jquery.ui.custom.css') ?>

The script that calls the modal window is in listgroups.php, but it could (and probably should) be moved out and abstracted so it can be reused by other modules/actions. Aside from access to the script, an <a> tag that will launch a modal window needs:

1) the modal css class
2) a href attribute
3) a title attribute (this is used to set the title of the modal window)

The modal window could also be used:
1) in other situations where a small amount of specific data needs to be displayed and a full page load is unnecessary (maybe address information for an individual person or place off of the list pages for staff or facility).
2) to display and submit single data point forms during a multi-step creation process or during data entry for one of the data-intensive forms (have a default option of 'Add Another' in the organization drop down for a staff person. Catch the selection of that option with jQuery, and display the organization form in the modal window. Save that form, and reload the organization list with the new organization selected on the staff page)


Work Items

This blueprint contains Public information 
Everyone can see this information.


No subscribers.