DEV Community

Areeb ur Rub
Areeb ur Rub

Posted on • Edited on

Popup Message(Modal), in 10 lines of Javascript;

Buy Me A Coffee

So you might have seen popup message on some website, here is a simplest way to make that

So to make this I have created a div with id Modal-1, using position property in css fixed the position at the center and then set the display to none so that it's hidden by default.

I have changed the background and given the modal a frost glass effect.

You can try the frost glass effect, check this out : Frost Glass Effect

Now, using javascript I have added a event listener to both the click button and close button you can initialize the popup in whatever way you want.

To Make the popup visible I changed the elements style display to block this will make the modal visible, to make the close button work again change the style.display to none.

Top comments (0)