--- name: modal url: /modal title: Modal ---

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.

Open modal ×
Open modal ×

Sizing Classes

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

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


Changing the Overlay

You can override the styling of the 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.


Sass Mixins

Write a modal with a custom class using our Sass mixins. Note that the class for the modal overlay can't be changed.

.custom-modal { // Extend the base modal class to get core structural styles @extend %modal; // Use the layout mixin to define the modal's width @include modal-layout( $width: 300px // Can be an absolute value or percentage ); // Use the style mixin to define the modal's visual style @include modal-style( $border: 1px solid black, $radius: 10px, // Border radius $shadow: 0 4px 10px #000 // Box shadow ); }

Sass Variables

You can customize with the Sass variables in the _settings.scss file: