--- name: modal url: /modal title: Modal controller: ModalController ---
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.
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.
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.
Modals can have unique in and out animations, using our motion classes. Refer to the Motion UI documentation for a full list of animations.
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.
Modals can be created on the fly using the ModalFactory
. Clicking the button will execute the code shown below.
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.
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.
Write a modal with a custom class using our Sass mixins. Note that the class for the modal overlay can't be changed.
You can customize with the Sass variables in the _settings.scss
file: