Creating Popups with CSS and Javascript

Popups are really annoying. One of the worst things about these pop-ups is that they keep pouncing and annoy you, especially if you are in a middle of something. Thankfully, with new features on browsers, we don’t see them anymore. This is because, browsers have become smart these days and they understand how frustrating these things can be, therefore, they automatically block them from appearing again and again.

However, there are times when you actually need to create them. For instance, you run a company and you have employees under you and you want to wish happy birthday. You can definitely call a person and wish them but that is something that is expected all the time. To make your employee feel special on their day, you though to create a pop-up that says “Happy Birthday to X”. It would be an unexpected gesture that the person would appreciate for the whole of his or her life and imagine the kind of image they would have about you.  So, even though pop-ups are annoying, they can prove to be helpful as well.

In earlier times, when you wanted to create pop-up, you usually force opened a new browser window over the current window. But when you would want these pop-up windows to appear for something useful, then what you would do? CSS is what you can use to create the pop-up effect. You need to put a floating div over the content of the site and there you are, your pop-up would appear. But the main problem was how to close them. Javascript is another language that can be used to close them. Here is the tutorial for creating pop-ups using CSS and then using Javascript to close it:

  • First things first, you need to find the source code of the html file. Once found, you would find “blanket” in the first line. This helps in creating a transparent black background effect behind the popup. Under “popupdiv”, you would put the entire language:-

<div id=”blanket” style=”display:none”></div>

<div id=”popUpDiv” style=”display:none”>

<a href=”#” onclick=”popup(‘popUpDiv’)” >Click to Close CSS Pop Up</a>

</div>

<a href=”#” onclick=”popup(‘popUpDiv’)”>Click to Open CSS Pop Up</a>

  • If you want the popup to appear on page load, then include “<body onload=”popup(‘popUpDiv’)”>

If you are unable to fix the problem yourself, contact the technical support team on the toll free number.

Leave a Reply

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