What's <dialog>

Currently (as of July 2014), Chrome supports dialog element. Please refer dialog element demo

My demos are working on Chrome 38 canary.
Update: My demos are working on Chrome 37.0.2062.120 stable.

Using Animation

Dialog element is changed from display: none to display: none; when you call dialog.show().

And then the dialog didn't have any actions such as animation. So I tryied to add animation into <dialog>.

This article's demo works on Chrome 38.0.2104.0 canary (64-bit).

add showing animation into <dialog>

Please click Open Dialog!. And then the dialog is displayed with animation.

If you call dialog.show(), the dialog has a open attribute.

I tried to use CSS Animations when the dialog had a open attribute.

  dialog[open] {
    -webkit-animation: show 1s ease normal;
}
@-webkit-keyframes show{
    from {
        transform: translateY(-110%);
    }
    to {
        transform: translateY(0%);
    }
}

add showing and closing animation into <dialog>

Please click Open Dialog! And then the dialog is displayed with animation.

After that, click Close Dialog!. And then the dialog is hidden with animation.

If you call dialog.close(), the open attribute is removed and the dialog is hidden. But I wanted closing animation, so I conceived an idea for closing animation.

  1. Click close button.
  2. Add .hide to the dialog classList and the dialog is hidden with animation.
  3. Attach webkitAnimationEnd Event to the dialog.
  4. When the dialog animation was finished, Remove .hide from the dialog classList.
  5. Call dialog.close()
  6. Detach webkitAnimationEnd Event from the dialog.
  document.querySelector('#close').onclick = function() {
    dialog.classList.add('hide');
    dialog.addEventListener('webkitAnimationEnd', function(){
        dialog.classList.remove('hide');
        dialog.close();
        dialog.removeEventListener('webkitAnimationEnd',  arguments.callee, false);
    }, false);
};

If the dialog has .hide...

  dialog.hide {
    -webkit-animation: hide 1s ease normal;
}
@-webkit-keyframes hide{
    to {
        transform: translateY(-110%);
    }
}

add showing and closing animation into <dialog::backdrop>

::backdrop is pseudo-element of dialog. ::backdrop is overlayed only when you call dialog.showModal();

Please click Open Dialog! And then the overlay is displayed with animation.

After that, click Close Dialog!. And then the overlay will be hidden with animation.

  .dialog::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    -webkit-animation: none;
}
.dialog[open]::backdrop {
    -webkit-animation: show-backdrop 0.5s ease 0.2s normal;
}
.dialog.hide::backdrop {
    -webkit-animation: hide-backdrop 0.5s ease 0.2s normal;
}
@-webkit-keyframes show-backdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes hide-backdrop{
    to {
        opacity: 0;
    }
}

Finally

Dialog element is so Awesome.

Also, modal dialogs are pushed on a well-ordered stack called the "top layer", rendered above all other elements, regardless of their z-index. Relying on z-index to put your modal dialog on top can be brittle in a complex web page. For example, the dialog may be stuck inside a low level stacking context, or other components may also try to be on top, or dynamic style changes may occur. http://demo.agektmr.com/dialog/#faq

If we can use dialog element, we don't need to use crazy z-index value such as z-index: 2147483647;.

Thank you for reading this to the end.