Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
94 lines (64 sloc) 2.77 KB
title description layout
The new HTML5 dialog element
Using the new HTML5 dialog element to provide cross-browser dialogs without libraries.
post

The HTML5 dialog element provides native dialog box functionality, such that no more libraries are needed to create such dialogs.

This will improve accessibility as the browser will know a dialog is a dialog, currently it does not. It will also allow cross-browser native dialog handling rather than relying on a third-party library.

Simple Example

{% highlight html %}

I am a dialog {% endhighlight %}

This will create a hidden dialog which has yet to be opened.

Dialog API

We have three available methods, dialog.show(), dialog.close() and dialog.showModal():

{% highlight javascript %} var dialog = document.querySelector('#myDialog');

dialog.show(); // Dialog is now visible

dialog.close(); // Dialog is now hidden

dialog.showModal(); // Dialog is now visible as a modal {% endhighlight %}

When using dialog.showModal(), the dialog is displayed in a modal-like fashion such that anything behind it cannot be interacted with.

You may also automatically open the dialog like so:

{% highlight html %}

I am a visible dialog {% endhighlight %}

If you choose to pass a value through dialog.close(), it will be assigned to dialog.returnValue.

Styling a Dialog

The standard dialog styling isn't anything great, but that's no problem as this element can be styled like any other.

{% highlight css %} dialog { border-radius: 6px; border: 1px solid rgba(0,0,0,.4); box-shadow: 0 0 5px rgba(0,0,0,.4); } {% endhighlight %}

You can also style the backdrop when using showModal:

{% highlight css %} dialog::backdrop { position:fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.4); } {% endhighlight %}

After customising the CSS, you can quite easily have a dialog setup just like that of Bootstrap without the need for any third-party library.

Use within forms

This new element also comes with the ability to set the method attribute of a form to dialog.

If you place a form inside a dialog and give it this method, the dialog will be closed on submission of the form. In addition to this, dialog.returnValue will be set to that of the submit button used.

{% highlight html %}

Foo {% endhighlight %}

Upon submission of the above form, dialog.returnValue will be foo.

Give it a try

Chrome (37, beta) currently supports the dialog element, so go ahead and have a play around with it.

A demo can be found here. If the dialog appears open on load, your browser does not yet support it.