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');
      divbg.style.visibility = "visible";
       
      var divobj = document.getElementById(id);
      divobj.style.visibility = "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
      divobj.style.left = divLeft + "px";
      divobj.style.top = 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');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      divobj.style.visibility = "hidden";
}
</script>

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; }
-->
</style>

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

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

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

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.

24 comments:

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

    ReplyDelete
  2. how to add animation to this

    ReplyDelete
  3. Excellent!! Thanks for writing this code...works like charm..

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

    ReplyDelete
    Replies
    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

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

      Delete
  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.

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

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

    ReplyDelete
  8. gr8 post dude..

    ReplyDelete
  9. i found this site very informative
    thank you

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

    ReplyDelete
  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

    ReplyDelete
  12. Thanks for this helpful scripts. Works Great!

    ReplyDelete
  13. Works absolutely error free!!!!

    ReplyDelete
  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

    ReplyDelete
  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

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

    ReplyDelete
  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?

    ReplyDelete
  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!

    G+1'ed

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

    ReplyDelete

Thanks a lot for your valuable comments :)