--- name: modal url: /modal title: Modal ---
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.
Back in my days...
There were 3 Star Wars movies and Disney only made cartoons.
You can embed a grid inside of a modal, complete with scrolling panels, fixed areas, and responsive adjustments.
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.
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.
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: