A fullscreen modal dialog UI component.
A JS example to invoke a modal dialog is provided below.
The modal JS provides the following options
origin[DOM Element] element that triggered the modal
content[DOM ELement] content to display in the modal
options[Object] object of optional params
title[String] title to display at the top of the modal
className[String] optional CSS class name to apply to the modal window.
onCreate[Function] function to fire after modal has been created
onDestroy[Function] function to fire after modal has been closed
allowScroll[Boolean] allow/restrict page scrolling when modal is open
closeText[String] text to use for close button a11y.
- You can use the utility class
mzp-u-modal-contentto hide content (when JS is enabled) that is intended to be shown only once a modal is displayed.
- You can pass an additional
mzp-has-mediato the modal to indicate that if the modal contains an image or video, those elements should be displayed full width.
- Any HTML content you wish can be displayed within a modal.
- Media content such as video should occupy the full width of the modal dialog, and be at least 1200px wide.