Demo of Dialog Just a simple, minimal jQuery dialog with typical interactivity

Dialog Examples

The dialog itself is an element with a class of dialog. It'll auto-initialize on dom-ready.

Typical dialog example

This is a dialog

Open Dialog

Markup broken down

The 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>

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>

		<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>

Modal and non-modal

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-dialog-transbg attribute:

<div class="dialog" data-dialog-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>

Opening and closing programatically

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" );

Ajax linking

You can pull another page into a dialog by adding a data-dialog-link attribute to a link.

Open in dialog

Additional external dialog with a # in its href, just for testing purposes:

Open in dialog

Adding a class via ajax linking

To set classes on the ajax dialog container, you can specify classes in a data-dialog-addclass attribute on the anchor:

Open in dialog

Adding a label via ajax linking

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:

Open in dialog

Iframe linking

You can pull another page into a dialog in an iframe by adding a data-dialog-iframe attribute to a data-dialog-link link.

Open in dialog

"Nested" Dialogs

Dialogs can open without closing already-open dialogs, and they'll close in the order they were opened.

Open Dialog

Non-history Dialogs

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

Open Dialog
Open Non-history Ajax Dialog

Dialog styled to be visible at some breakpoints

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:

  1. The dialog element's CSS display property does not equal "none"
  2. The dialog element's CSS visibility property does not equal "hidden"
  3. The dialog close link's (if it is in the markup) CSS display property equals "none"
  4. The dialog background screen's CSS display property equals "none"

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

Open Dialog