modern-now

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.

I'm a dialog

A modal dialog (with data-dialog-modal attribute).

I'm a modal

A modal dialog. Disable scroll on the page and animates

I'm a modal and there are no scrollbar on the page

A dismissible dialog (with data-dialog-dismissible)

I'm a dismissible modal

A scrollable modal.

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.

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).

Offcanvas Demos

An offcanvas menu with the body that can scroll (with data-dialog config being used to pass dismissible).

I'm a offcanvas menu

An offcanvas menu with the body that cannot scroll (with offcanvas-no-scroll class).

I'm a offcanvas menu with scrolling disabled