Back
Dialog
Introduction
Dialogs are great and have been mostly available in any modern browsers,
except on ios where it requires at least safari 15.4 (2022).
This is why modern-now loads dynamically the dialog polyfill when needed, with no impact on modern browsers.
The other annoying part is that you still need bits of javascript to trigger modals. modern-now solves this by providing to
button tags a data-dialog attribute.
Styles are up to you (here we are using default simple.css styles). We add a nice closing class to help creating closing
animations.
Disabling scroll on the page can be done with just a bit of css (provided that your browser has :has support).
Demos
A simple dialog. Inside the modal, the data-dialog-close attribute can be used as a close trigger. Closing from
outside only works if no backdrop prevents clicking.
Show dialog
Close dialog
I'm a dialog
Close
A modal dialog (with data-dialog-modal attribute).
Show modal
I'm a modal
Close
A modal dialog. Disable scroll on the page and animates. Animation also works with 'Esc' with proper styles.
Show no scroll modal with animation
I'm a modal and there are no scrollbar on the page
Close
A dismissible dialog (with data-dialog-dismissible)
Show dismissible modal
Show dismissible modal with animation
Show dismissible modal with transition
I'm a dismissible modal
Close
I'm an animated dismissible modal
Close
I'm an animated dismissible modal using allow-discrete
Close
A scrollable modal.
Show scrollable modal
Close
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Cillum aliquip excepteur do reprehenderit aliqua sit. Pariatur nisi cupidatat cupidatat amet sit anim incididunt
anim.
Veniam ipsum deserunt mollit magna sint. Occaecat consectetur excepteur consequat anim sunt duis tempor tempor sit
do
eu. Veniam adipisicing aliquip nulla cillum in aute eiusmod excepteur sit velit laboris quis. Culpa incididunt magna
culpa pariatur exercitation Lorem voluptate laboris consectetur esse. Dolore adipisicing enim voluptate sit do
labore
dolor consequat consectetur tempor nisi sit enim fugiat.
Close
Ajax demos
You might be interested to load `dialog`'s content when opening, since they often contain optional things. This can be easily
achieved in combination with `data-hx` attribute. HX will make GET requests on "open" triggers by default (a custom event is
fired
since none exist in js).
Show ajax modal
We don't even need a dialog element if we simply want to load it's content in a default dialog. Since we can define
properties
either on the button or the dialog, it's easy to configure the dialog as you see fit (dimissible, etc.).
Show ajax modal (no dialog)
Offcanvas Demos
An offcanvas menu with the body that can scroll (with data-dialog config being used to pass
dismissible).
Show menu
I'm a offcanvas menu
Close
An offcanvas menu with the body that cannot scroll (with offcanvas-no-scroll class).
Show menu without scroll
I'm a offcanvas menu with scrolling disabled
Close