HTML 5.2 Native modal

23-04-2018

With HTML 5.2 creating and maintaining modals is super easy!!

<button id="dialog-open">Open dialog</button>

<dialog id="dialog">
    <p>This is a dialog</p>
    <button id="dialog-close">close</button>
</dialog>

Adding the open parameter to the dialog element forces it open.

<dialog id="dialog" open></dialog>

This can easily be manipulated with javascript using dialogElement.showModal(); and dialogElement.close();

You can edit the backdrop of the dialog using ::backdrop like so:

#dialog::backdrop {
    opacity: 0.3;
    background: blue;
}

Interactive example

See the Pen HTML 5.2 Native modal by Tristan White (@triss90) on CodePen.

Unfortunately this awesome feature is very poorly supported. Currently only Google Chrome has support for this.

Method of easily creating custom dialog boxes to display to the user with modal or non-modal options. Also includes a ::backdrop pseudo-element for behind the element.

You can read more about this on the MDN Web Docs