Thursday, June 4, 2009

Popup Div tag with close button using JavaScript and DHTML

Popup Div tag’s are very common on websites these days. Popup div tags can be used to display some vital information or focus on some particular content rather then whole page. I have created a very easy to use DHTML & JavaScript code for popup div tag with close button and a transparent page background which disables any clicks on the parent window.

I have implemented this script in such a manner that you can put any number of popup div tags on a single page with different id’s. The close button for every popped up Div tag is automatically generated by the script.

The Trick: CSS has a property named visibility which can be used to display or hide any entity to which it is applied. These popup div tags can be placed anywhere in the HTML code, and when the popup link/button is clicked, the popup div tag’s visibility is set to visible (initially hidden) and it is aligned at center of the page by using my previous JavaScript for center aligning a div tag at page center. I have also used a transparent background div tag which covers the remaining background and disables clicking on the parent window. There is only one transparent background for every page and it is layered below the popup div tags using the z-index property of CSS.

Popup Div Tag with close button

There are 2 JavaScript functions used here, one to open the div tag and align it to page center and the second function is to hide the popup and background div tags.

Popup Div JavaScript Code:
<script language="javascript">
function openpopup(id){
      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
      //Make the background div tag visible...

      var divbg = document.getElementById('bg'); = "visible";
      var divobj = document.getElementById(id); = "visible";
      if (navigator.appName=="Microsoft Internet Explorer")
      computedStyle = divobj.currentStyle;
      else computedStyle = document.defaultView.getComputedStyle(divobj, null);
      //Get Div width and height from StyleSheet
      var divWidth = computedStyle.width.replace('px', '');
      var divHeight = computedStyle.height.replace('px', '');
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2;
      //Set Left and top coordinates for the div tag = divLeft + "px"; = divTop + "px";
      //Put a Close button for closing the popped up Div tag
      if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 )
      divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\">X</span></a>" + divobj.innerHTML;
function closepopup(id){
      var divbg = document.getElementById('bg'); = "hidden";
      var divobj = document.getElementById(id); = "hidden";

CSS Code for the Popup Div tag, Close Button and Background Div tag:
<style type="text/css">
.popup {
      background-color: #DDD;
      height: 300px; width: 500px;
      border: 5px solid #666;
      position: absolute; visibility: hidden;
      font-family: Verdana, Geneva, sans-serif;
      font-size: small; text-align: justify;
      padding: 5px; overflow: auto;
      z-index: 2;
.popup_bg {
      position: absolute;
      visibility: hidden;
      height: 100%; width: 100%;
      left: 0px; top: 0px;
      filter: alpha(opacity=70); /* for IE */
      opacity: 0.7; /* CSS3 standard */
      background-color: #999;
      z-index: 1;
.close_button {
      font-family: Verdana, Geneva, sans-serif;
      font-size: small; font-weight: bold;
      float: right; color: #666;
      display: block; text-decoration: none;
      border: 2px solid #666;
      padding: 0px 3px 0px 3px;
body { margin: 0px; }

HTML Code for popup div tags:
<a href="#" onclick="openpopup('popup1')">Open Popup Div #1</a>
<div id="popup1" class="popup">
Popup Div Tag #1 content goes here!

<a href="#" onclick="openpopup('popup2')">Open Popup Div #2</a>
<div id="popup2" class="popup">
Popup Div Tag #2 content goes here!

<div id="bg" class="popup_bg"></div>

Every popup window on a page should have a unique id and that same id should be used in the onclick() event of the link. You can even put other div containers inside the popup div or use iframes to display content from other pages.


  1. This script is great. Just what I was looking for and works brilliant. Thanks so much!

    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

  2. how to add animation to this

  3. Excellent!! Thanks for writing this like charm..

  4. Just what i need..Cool..
    thanks budy

    1. it doesn't seems to work with me, i have an flash object, and i want to display a image on clicking the flash object, at center of the browser, i am totally messed up, any help please

    2. just uncoommnet the folowing and copy paste into a html file then run the file

  5. Finally, i have been looking for such a thing for weeks now, tried to make such a script myself too, that didn't do much except for making a div appear on a fixed place in the page, something Internet Explorer handles very badly...
    This does exactly what I want, and unlike jQuery it doesn't hold numerous unneeded files...
    Thank you very much for sharing this.

  6. the close link not visible in IE& and IE8
    What should i Do????
    Plz help...

  7. Simple and clean. It works perfectly on IE9 and Google Chrome 20. Thank you for sharing!

  8. gr8 post dude..

  9. i found this site very informative
    thank you

  10. Great! It was a great job. And all information is practically truth.

  11. I want to make my own blog page by using HTML and other programming languages. if you have nay knowledge abiut this topic please write this in your next blog page. Thanks

  12. Thanks for this helpful scripts. Works Great!

  13. Works absolutely error free!!!!

  14. Its overall work but having some bug which is I apply this code in master page. When i load my homepage, the entire popup window are only readable but for another pages there are work. May I know what is the problem? thank you very much

  15. It’s perfect time to make some plans for the future and it’s time to be happy. I have read this post and if I could I desire to suggest you few interesting things or advice. Maybe you can write next articles referring to this article. I want to read more things about it!
    website design

  16. Love this, except, how can I keep the page from jumping to the top whn the pop up link is clicked? Thanks.

  17. Thanks this was a great help! I was getting extra white space so switched from "visibility:hidden" to "display:none" instead. Did I miss something?

  18. Awesome code, simple and easy to tweak, setup and tweaking took me less than 15min for popup ads!
    No 50kb+ libraries and similar crap, pure js, highly appreciated!


  19. works good but i like to show a url in pop up Thanks.


Thanks a lot for your valuable comments :)