Modal component about photon HOT 1 OPEN

@connors How about just styling the already-available HTML5 <dialog> element? That way the project can stay CSS-only - <dialog> already provides JS methods for .showModal() and .close(), and supports backdrop styling and keyboard shortcuts.

Here's a working demo (I keep doing this):
http://jsfiddle.net/developit/ymx5qev6/

Here's the CSS (because no new markup is needed):

dialog {
    padding: 0;
    border: 1px solid #bebebe;
    border-radius: 6px;
    box-shadow: 0 0 30px rgba(0,0,0,.1);
    overflow: hidden;

    /* if you want a non-default backdrop: */
    &::backdrop {
        background: rgba(0,0,0,.2);   /* the default is rgba(0,0,0,.1) */
    }
}

from photon.