HOW TO USE THE DIALOG ELEMENT

In the last couple of years pop-ups and modal boxes have become a lot more popular, and with the HTML5 dialog element we can create easy HTML dialogs and modals without the need for any JavaScript plugins, just simple HTML and some vanilla JavaScript.

Since this feature is so new it’s only available in Chrome Canary and even then you need to go to chrome://flags and turn on the Enable Experimental Web Platform Features flag in order for it to work properly.

Helpfully there is also a polyfill developed by Google that helps older browsers support this element.

CREATING DIALOGS

This element makes creating dialogs really easy and it works just like you would expect; the HTML for a dialog would look something like this:

<dialog id="dialog">
<p>Hello World</p>

 <button id="close">Close</button>
</dialog>

The code is pretty self explanatory but if you add that to a file and open it in a browser you’ll see that the dialog doesn’t appear automatically because for that we need to call the showmethod on it , like so:

var dialog = document.getElementById('dialog');
dialog.show();

Now when you load the page you can see the dialog right away, this may be something you want but usually we want these pop ups to appear when the user clicks a certain button and for that we need to create a trigger button in our HTML:

<button id="launch">Launch me</button>

And in our JavaScript we just need to wrap our show code inside an event listener that triggers when the user has clicked the launch button :

var dialog = document.getElementById('dialog');
$('#launch').click(function() {

   dialog.show();
});

Another method we have for dialogs is the close method. We already have a close button in our dialog so adding the closing functionality to it quite simple:

$('#close').click(function() {

    var close = document.getElementById('close');

    dialog.close();
});

Now we have a fully functional dialog with some simple HTML and Javascript.

As you may notice I am not using jQuery for the dialog methods and instead I am using normal JavaScript, that is because jQuery already has a show method and when attempting to use this functionality with jQuery there is a conflict.

CREATING MODALS

Modals are very similar to dialogs but they are different in the sense that modals do not allow you to interact with anything on the page besides the modal itself.

Creating modals is similar to creating dialogs, our HTML will be:

<button id="launch-modal">Launch Modal</button>
<dialog id="modal">

  <p>You can not click anything else</p>

  <button id="close-modal">Close</button>
</dialog>

As you can see all I did was change the text and ID’s to reflect the change from dialog to modal. In our JavaScript the code is also pretty similar all that we need to change is the method we call and for modals that method is showModal. The JavaScript is:

var modal = document.getElementById('modal');
$('#launch-modal').click(function() {
modal.showModal();
});
$('#close-modal').click(function() {
var close = document.getElementById('close-modal');
modal.close();
});

If you test this modal out you will indeed see that you are not allowed to interact with anything else on the page apart from the modal itself.

You can also see a demo in this pen I created.

When it comes to styling the elements you would go about it just like you would in any element but one thing worth noting is that when using modals you also have the backdrop pseudo-element at your disposal and this pseudo-element styles the background behind the modal, you can use this to add a texture or even darken the background completely so that the user can’t interact or see any other elements:

dialog::backdrop {
background: rgba(0,0,0,0.9);
}

This means that with the help of CSS you can style the backdrop and the dialog itself any way you want it and because it’s semantic HTML styling is a lot easier.

CONCLUSION

This element is not one we can use right away in our projects but it’s something we can look for in the future since it makes our jobs as developers much easier.

With the elimination of plugins commonly used for this effect we’ll also see faster load times.