HTML <dialog> Modal

We can now get a free functionality from native HTML when creating modals or dialogs, and thanks to the custom DOM element in Webflow, we can also setup and style them easily. See the navigator and page settings custom code for how styling and functionality is set, and add the attribute of open="true" to the <dialog> element in the navigator to open it for adjusting its internal content. For the open functionality to work from the javascript in the page settings, the <dialog> element must also always come right before the button element that opens it below.

The dialog is here

You have opened the native HTML dialog!

↓ You can have as many on a page as you want too, see below ↓

Another modal

Just showing another one down here to show how you can multiple on a page.

This is another dialog

This cloneable was inspired by the great overview video and blog post from Web Dev Simplified.