Make jQuery popup box within 5 minutes

For different projects, we need to create popup box/modal box. Every time I create popup from scratch and whatever approach comes to mind I use that.

I wrote 14/15 lines of javascript that can handle hundreds of different popups.

Let’s take a look on what we are going to build. Demo

It’s a simple project and it has only one HTML file. I’ve included CSS and javascript in HTML document.

The html part

At the top there are three buttons. The buttons should have btn class and data-box attribute.
And there are three divs called popups. This popup class is essential. And id of these divs should match to data-box attribute of buttons.

The javascript part.

Whenever user clicks on a button it checks data-box has a value. If not jQuery will not do anything.
Otherwise it will hide all popups and shows the popups which ID is exact same with data-box attribute of clicked button.

And when user clicks on overlay or close icon, it will hide the popup.

Leave a Reply

Your email address will not be published. Required fields are marked *