How to Create a dialog/modal with HTML 100%,0% JavaScript..

Did you know that you can create a dialog (modal as some people call it ) with just HTML? No JavaScript 😲

I know must of you must have had a difficult time creating a dialog / modal from scratch..

I’ve been in your shoes too, that’s why I took time to research an easier way to create a dialog without spending the whole day..

Lazy programmers find an easier way to get the job done…

P.s : You won’t find this article anywhere else ⭐.

Have you heard of the html attribute called popover?

POPOVER ATTRIBUTE IN HTML..

The popover attribute allows you to create a dialog with just html and css only.. No JavaScript.

It can only be triggered by a button or an input..
It’s properties are popovertarget which should be on the trigger (button or input) and should also have same value of the id of the div that has the contents that should be shown when clicked..

Here’s an example:

<button popovertarget="pop"> click me
</button>

<div id="pop" popover>
Popover contents...
</div>

The code above is a simple example of how to use the POPOVER ATTRIBUTE…

100% html and 0% JavaScript

If you found this article helpful, kindly share it for other developers..

I’ll be writing on how to style a popover next, just stick around.

N:B It’s not supported in all browsers..

Supported browsers includes;

• Chrome
• Microsoft Edge

Firefox and Opera browser not supported…

Follow me on twitter