connors / photon

The fastest way to build beautiful Electron apps using simple HTML and CSS
photonkit.com
MIT License
10.01k stars 580 forks source link

Modal component #8

Open connors opened 9 years ago

connors commented 9 years ago

There should be a simple modal component. This would be used in the current window instead of popping a new window.

developit commented 9 years ago

@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/ preview

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) */
    }
}