The dialog itself is an element with a class of dialog
. It'll auto-initialize on dom-ready.
This is a dialog
CloseThe dialog itself is an element with a class of dialog:
<div class="dialog">Content here...</div>
To open it via a link, give the dialog an id
and link to that ID somewhere on the page:
<div class="dialog" id="mydialog">Content here....</div>
<a href="#mydialog">Open Dialog</a>
Once open, the dialog can be closed via back button, escape key, clicking or tapping the overlay screen (if styled to be visible).
You can also add a close link by adding a link anywhere in the dialog element with an attribute data-dialog-close
.
<div class="dialog" id="mydialog">
<p>This is a dialog</p>
<a href="#" data-dialog-close>Close</a>
</div>
Rather than using a null #
href for the close link, we find it's nice to link back to the link that opened the dialog, just in case the user scrolled away from that place while the dialog was open. You can do this by giving the opener link an id
attribute and linking to that ID from the close link:
<div class="dialog" id="mydialog">
<p>This is a dialog</p>
<a href="#mydialog-btn" data-dialog-close>Close</a>
</div>
<a href="#mydialog" id="mydialog-btn">Open Dialog</a>
Lastly, it's helpful to add a title for the dialog and identify it as such for assistive technology. You can either do that by setting the aria-labelledby
attribute on the dialog element to reference the ID of another element that acts as its title, or by adding an aria-label
attribute with a text value that acts as a title for the dialog. The demos on this page use aria-label
.
<div class="dialog" id="mydialog" aria-label="dialog example">Content here...</div>
Much of the presentation of the dialog is configured in CSS.
The default modal appearance is applied to .dialog-background
element that the script generates by default.
If you want to style this element differently, just style that selector however you'd like:
.dialog-background {
background: red;
}
You can also configure the background to be transparent via the dialog markup, by using the data-transbg
attribute:
<div class="dialog" data-transbg>Content here...</div>
If you'd prefer to have no background element at all, you can use the data-dialog-nobg
attribute:
<div class="dialog" data-dialog-nobg>Content here...</div>
You can open and close the dialog via JavaScript by triggering an open or close event:
// open:
$( "#mydialog" ).trigger( "dialog-open" );
// close:
$( "#mydialog" ).trigger( "dialog-close" );
You can pull another page into a dialog by adding a data-dialog-link
attribute to a link.
Additional external dialog with a # in its href, just for testing purposes:
To set classes on the ajax dialog container, you can specify classes in a data-dialog-addclass
attribute on the anchor:
To set the aria-label
or aria-labelledby
attributes on the ajax dialog container, you can specify a value in a data-dialog-label
or data-dialog-labelledby
attribute on the anchor:
You can pull another page into a dialog in an iframe by adding a data-dialog-iframe
attribute to a data-dialog-link
link.
Dialogs can open without closing already-open dialogs, and they'll close in the order they were opened.
By default, dialogs are re-openable via the back or forward button, and
can be deep-linked via the hash. To opt out of this behavior, use
the data-dialog-history="false"
attribute and value on the
dialog or a dialog link. History tracking can be turned of globally by
setting a property on the dialog component
constructor, window.Dialog.history = false
If a dialog is styled to be visible and non-closeable at any breakpoint, the JavaScript will detect that and remove the dialog's role and tabindex attributes so that its role in the page is communicated accurately to assistive technology. This happens both upon initialization and whenever the viewport is resized.
To take advantage of this accessibility feature, the following criteria must be met in your dialog's CSS:
The following dialog uses CSS to display it as static content at wider breakpoints, as well as hiding the elements associated with deeming the dialog non-closeable.
This is a dialog
Close