Modal

Modal dialogs, or pop-up windows, are handy for prototyping and production. It focuses the user on the modal content. You can add images, links, and even a grid inside.


Open modal

Basic HTML

Modals are made with the custom zf-modal tag. To create a trigger to open the modal, add the attribute zf-open="id" to an element, where id is the ID of the modal.

Add the attribute zf-close to an element inside the modal to create a close button. We also have a handy close button element you can use—just add the class close-button to an element.

Open modal
×

Back in my days...

There were 3 Star Wars movies and Disney only made cartoons.

Open modal

Using the Grid

You can embed a grid inside of a modal, complete with scrolling panels, fixed areas, and responsive adjustments. Start by nesting a grid block directly inside the modal container, and go from there. Note that you also need to add a collapse class to the zf-modal element if you want the grid elements to be flush with the edge of the modal.

Open modal
Title Bar
Close Done
Open modal

Sizing Classes

You can add the classes tiny, small, or large to change the maximum width of the modal. The widths of each size are:

You can change the names and widths of the sizing classes by modifying the $modal-sizes Sass variable in your settings file.


Adding Animation

Modals can have unique in and out animations, using our motion classes. Refer to the Motion UI documentation for a full list of animations.

Fancy-esque Modal
×

Slide to the left

Slide to the right

Hinge from the center

Fancy-esque Modal

Dialog-style Modals

On small screens, the modal becomes full-width and full-height, to make scrolling its contents easier. This behavior can be disabled by adding the class dialog to a zf-modal element.

Itty-Bitty Modal

Yo, do you really want to do this?

Yeah Nah
Itty-Bitty Modal

Programmatic Modals

Modals can be created on the fly using the ModalFactory. Clicking the button will execute the code shown below.

Open modal var modal = new ModalFactory({ // Add CSS classes to the modal // Can be a single string or an array of classes class: 'tiny dialog', // Set if the modal has a background overlay overlay: true, // Set if the modal can be closed by clicking on the overlay overlayClose: false, // Define a template to use for the modal templateUrl: 'partials/examples-dynamic-modal.html', // Allows you to pass in properties to the scope of the modal contentScope: { close: function() { modal.deactivate(); $timeout(function() { modal.destroy(); }, 1000); } } }); modal.activate();

Changing the Overlay

You can override the styling of the default modal overlay by styling .modal-overlay in your Sass. The class name of the modal overlay can be changed by changing the $modal-overlay-class variable in your Sass settings file.


Styling the Modal

Any CSS classes on a zf-modal element will be applied to the modal overlay, not the modal itself. This allows you to style both elements with one class.

// This is the modal overlay .killer-modal { // This is the modal itself .modal { } }