Open connors opened 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/
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) */
}
}
There should be a simple modal component. This would be used in the current window instead of popping a new window.