Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal component #8

Open
connors opened this issue Oct 12, 2015 · 1 comment
Open

Modal component #8

connors opened this issue Oct 12, 2015 · 1 comment

Comments

@connors
Copy link
Owner

connors commented Oct 12, 2015

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

@connors connors added this to the v1.0.0 milestone Oct 12, 2015
@developit
Copy link
Contributor

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

This was referenced Oct 16, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants