Popups, a discovery document
source | component name | overlay present | multiple controls | modal content scroll behavior | page content scrolls behind overlay? | rules about closing | Other | How to not scroll body |
https://designsystem.quickbooks.com/component/modals/ | modal | yes | no - close only | The modal component scrolls, but not the content inside. | the content behind a modal should not scroll | modals stop users from continuing until an action is completed | 3 size options | |
https://semantic-ui.com/modules/modal.html | modal | yes - its called a dimmer and has options. inverted has a light background (because the default is a dark version) blurring makes the overlay blur the background contents of the page | they don’t even have a close button. click the “dimmer” or take an action | they offer both. an “internally scrolling content” and a “scrolling modal” | no | they allow clicking anywhere but provide code to “force a choice” which sets the closable option to false | | |
https://getbootstrap.com/docs/4.1/components/modal/ | modal | yes - called backdrop in the documentation (not in the code) | no - close only | scrolls the page | no | they allow clicking anywhere but provide a way to prevent backdrop dismissal via data attributes. | 2 optional sizes | bootstrap uses a class on the body called modal-open |
http://www.carbondesignsystem.com/components/modal/code | modal | yes | no - close only | internal scrolling | yes | Modals may be dismissed in 3 ways:
| | |
https://www.lightningdesignsystem.com/components/modals/ | modal | yes | no - close only | internal scrolling | ? | can be closed with esc button, cancel/close, or other actions | Focus shouldn’t return to the underlying page until the modal is closed | |
https://material.io/develop/web/components/dialogs/ | dialog | yes - but can be set to full-screen | none unless the modal is fullscreen and then they have close and save controls | internal scrolling | no | Dialogs may be dismissed by:
If the user’s ability to dismiss a dialog is disabled, the user must choose a dialog action to proceed. | | |
http://ux.mailchimp.com/patterns/dialogs#feature | dialog | yes | generic version has a close button feature version has none | internal scrolling | no | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |