#modal-dialog

[ follow ]
#accessibility #chrome-144 #overscroll-behavior #scroll-prevention #non-modal-dialog #ux #ui-patterns #bootstrap5
fromBram.us
1 week ago

Use overscroll-behavior: contain to prevent a page from scrolling while a is open

While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open. ~ CSS overscroll-behavior - which I first covered here in 2017 - allows you to control what a browser should do when reaching the boundary of a scrolling area. For example, if you set it to overscroll-behavior: contain, it will prevent scroll chaining from happening, so that underlying elements don't scroll.
Web development
UX design
fromThe A11Y Collective
1 month ago

When to Use Modal vs Dialog Components

Use modal dialogs only for critical, interruptive tasks requiring exclusive attention; prefer non-modal dialogs for optional, contextual interactions to preserve workflow.
jQuery
fromjQuery Script
2 months ago

Create Dynamic Bootstrap 5 Modals with One JS Call - bootstrap5-dialog

bootstrap5-dialog provides a JavaScript API to create, customize, and manage Bootstrap 5 modal dialogs dynamically without static HTML modal markup.
[ Load more ]