DEV Community

Areeb ur Rub
Areeb ur Rub

Posted on • Edited on

4 1

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay