Categories
HTML Tutorials

Native Modals using HTML Dialog Element

Native Modals is all discussed next. I will go through the existing solutions and recreate a minimal modal with HTML dialog element. For the sake of brevity, lets keep the styling and interactions for next article.

Dialog, popup, modal, alerts or popover you name it. All there job is to take user attention for what ever content they were previously consuming and act on that notification based on the situation. As alerts will lock the user screen while notifications notifies about certain activity and dismiss themselves after some time. This UI pattern is explained really well by answer to this ux stackexchange question.

In this article I will refer to them as dialog. It is as important component of an application as is a navigation. Like we can alert a user to confirm whether to delete a record or user profile. This is a perfect case to disable the background.

A modal
Example of Delete Modal

Our viewers can also subscribe to our newsletters by just using popups (or in other words capturing user’s email address). We can also let user easily update information or go less critical with dialog boxes that we see when sharing an article on other social networks like facebook, twitter etc.

Image credits: Vncent Lejtzen

Existing solutions for dialog like jQuery UI Dialog or Bootstrap Modals covers almost all the situations. These frameworks will do all sort of things like adding backdrop (drop shadow or an overlay) and centre aligning the content of dialog. Revealing and hiding it with JavaScript and making it Accessible (navigate with keyboard)

A Sign up form displayed in jQuery UI Dialog
A typical jQuery UI Dialog with HTML Form. It comes with all the features, i-e accessibility, interactions and more

Why Native Modals

We don’t need to have non semantic wrapper elements like div. We need to do all sort of things like adding backdrop (dropshadow) and centre align horizontally and vertically. Most Importantly we don’t need to use any third party tool. Traverse the DOM Api to design it’s reveal, hide and making it highly accessible.

But now we have Native Modal with HTML dialog element.

All we have to do is to wrap our dialog content in dialog tag as

<dialog id="dialog">
  <h1>HTML5 Dialog</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius vero commodi minus exercitationem aliquam, suscipit atque officia consequatur! Sit architecto aliquid veritatis magni exercitationem ea molestias sunt iste, perferendis.
    </p>
  </dialog>

By default the dialog is in hidden state. In order to show can simply add a button and use showModal() function on dialog api as

<button onclick="dialog.showModal()">
   Show Dialog
 </button>
A simple Native Modals using HTML Dialog element with headline and placeholder paragraph technbuzz.com
Basic Native modals with all the basic features out of the box.

Looking at above result we can see that it is centered out of the box. The backdrop can be clearly seen as a shade of grey which also protects the page content. In addition it’s also keyboard accessible. Pressing Esc will close it. We are missing one thing. There is no way to close the dialog (unless we press the esc key). Lets fix it next

<dialog id="dialog">
  <h1>HTML5 Dialog</h1>
  <button onclick="dialog.close()">X</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</dialog>

<button onclick="dialog.showModal()">
 Show Dialog
</button>
Native Modals using HTML Dialog element variation with close button to hide it. technbuzz.com

From line 7 to 9 we are using close() function provided by HTML Dialog API which works similarly as pressing the Esc key. (The X button is in very weird place because here I am implying how much can we achieve just with markup). The behind the element can by styled by using ::backdrop pseudo-element.

::backdrop {
  background:rgba(255,99,71,0.33);
}

Live Preview

See the Pen Native Modal with HTML Dialog by Samiullah Khan (@samiullah1989) on CodePen.6143

Browser Support

At the time of writing this article, Chrome 37 enabled it by default (before this, it was available behind “Experimental web platform features flag”). It’s also well supported in Opera, Chrome for Android. Edge is considering to support it in the future releases.

Pollyfill Solution

Looking at above caniuse table, HTML dialog is very missed. Consequently as everything can be pollyfilled in html so does the Native Modal. The one that comes on top is from Google Chrome living on github.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.