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.

98 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. i found this site very informative
    thank you

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

    ReplyDelete
  10. 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
  11. Thanks for this helpful scripts. Works Great!

    ReplyDelete
  12. Works absolutely error free!!!!

    ReplyDelete
  13. 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
  14. Love this, except, how can I keep the page from jumping to the top whn the pop up link is clicked? Thanks.

    ReplyDelete
  15. 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
  16. 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
  17. works good but i like to show a url in pop up Thanks.

    ReplyDelete
  18. Its a good post and keep posting good article.its very interesting to read.

    CCNA Training Institute Training in Chennai

    ReplyDelete
  19. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.

    And indeed, I’m just always astounded concerning the remarkable things served by you. Some four facts on this page are undeniably the most effective I’ve had.
    MATLAB TRAINING IN CHENNAI | Best MATLAB TRAINING Institute IN CHENNAI
    EMBEDDED SYSTEMS TRAINING IN CHENNAI |Best EMBEDDED TRAINING Institute IN CHENNAI
    MCSA / MCSE TRAINING IN CHENNAI |Best MCSE TRAINING Institute IN CHENNAI
    CCNA TRAINING IN CHENNAI | Best CCNA TRAINING Institute IN CHENNAI
    ANDROID TRAINING IN CHENNAI |Best ANDROID TRAINING Institute IN CHENNAI

    ReplyDelete
  20. Attend The Python training in bangalore From ExcelR. Practical Python training in bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Python training in bangalore.
    python training in bangalore

    ReplyDelete
  21. Find a local DJ, DJ wanted London
    Dj Required has been setup by a mixed group of London’s finest Dj’s, a top photographer and cameraman. Together we take on Dj’s, Photographers and Cameramen with skills and the ability required to entertain and provide the best quality service and end product. We supply Bars, Clubs and Pubs with Dj’s, Photographers, and Cameramen. We also supply for private hire and other Occasions. Our Dj’s, Photographers and Cameramen of your choice, we have handpicked the people we work with

    ReplyDelete
  22. Congratulations This is the great things. Thanks to giving the time to share such a nice information.best Mulesoft training in bangalore

    ReplyDelete
  23. Awesome post with lots of data and I have bookmarked this page for my reference. Share more ideas frequently.salesforce crm training in bangalore

    ReplyDelete
  24. Thank you so much for this Post and all the best for your future. You are really a talented person I have ever seen. I am satisfied with the arrangement of your post i think i must share here mcafee.com/activate

    ReplyDelete
  25. Thanks for the helpful guide. Popup Div tags are very common on websites these days. Floating div tags can be used to display important information. Great code, the author is handsome! It seemed to me that you have it too detailed and from this large in size, I think you can reduce it at least twice if you use pseudo-classes and identifiers, for example, I generally recommend watching a video on YouTube on how to shorten any code by almost five times and not cut it its functionality. There you can find a lot of similar videos and I noticed that most often there are comments under such videos that have no less than 10 thousand likes! I'm sure this is because the authors of these comments buy youtube comment likes to increase the number of likes.

    ReplyDelete
  26. Canon Printers are one among the simplest printers within the industry. The highly versatile beat one printer has features that make them stand out among others
    canon.con/ijsetup | canon.com/ijsetup

    ReplyDelete
  27. On your place I would make a video version of this for youtube. I like to make youtube video and get likes from here https://soclikes.com

    ReplyDelete
  28. QuickBooks is a vital and most utilized accounting software that provides a variety of versions to fulfill the needs and demands of users. You can seize exact and quality customer services by contacting Quickbooks Customer Service Number +18557561077

    ReplyDelete
  29. QuickBooks is popular accounting software that lends assistance to small and medium scale businesses across the globe. The software can easily furnish complicated business tasks like payroll management, tracing finances and cash flow, emailing and creating invoices, etc. to get prompt services for QuickBooks, you can dial the toll-free number +18664475478 QuickBooks Customer Service.

    ReplyDelete
  30. You can also click here to find contact information for their service centers. You can reach them at +1 866-822-4745 to find out if they have any associates that are available to help you out. Thus, There is no convenient way to contact Quickbooks Customer Service. Many people have found that sending an email to their account manager will elicit a response in a day or two. View more at Quickbooks Phone Number

    ReplyDelete
  31. Welcome to our amusement arcade in Bognor Regis. We are fully stocked with arcade amusement machines and games room equipment, suitable for all ages up to adults alike. If you’re looking for online shopping in addition to seeing the product in real life, our showroom is the place to buy your equipment from!view more at https://cassino.co.uk/

    ReplyDelete
  32. This will save you hours of time and make the business management process more effective and efficient. When you are new to QuickBooks Customer Service +1 347-982-0046, there are many ways you can learn about its features by calling the company's number Quickbooks Phone Number.

    ReplyDelete
  33. The software can be tailored to suit different business needs by using one of its four editions: QuickBooks Pro, QuickBooks Premier, QuickBooks Enterprise Solutions, or Quickbooks for Mac. To find out more about the company's software-based services and call centre hours, Quickbooks Customer Service +1 855-885-5111.view more at Quickbooks Phone Number

    ReplyDelete
  34. QuickBooks also has a range of features, including online invoicing and customer relationship management tools. If you have any questions about either the software or how it can benefit your company, call them on their toll-free number at QuickBooks Customer Service +18558020330. QuickBooks is a software that helps you keep track of your finances and enables you to produce financial statements.

    ReplyDelete
  35. A new product release of the software, QuickBooks Online, allows for cloud-based accounting. This means that users can access their accounts on any internet-enabled device at any time. There are also phone support services for QuickBooks, which includes a 24-hour QuickBooks Customer Service +18557427868 and email service.

    ReplyDelete
  36. Quickbooks customers can dial a toll-free Quickbooks Customer Service+1 855-587-4968 to get answers to their questions. The phone line is free and the live operators are trained to handle many Quickbooks related issues.

    ReplyDelete
  37. By dialling QuickBooks Support Phone Number +1 866-448-6293, you will be able to reach the help desk quickly where they will be able to give you solutions for different problems that you may face with the software. Thus, The best way to fix such problems is to dial the number and talk to the technical support.

    ReplyDelete
  38. you can dial the QuickBooks helpline on .QuickBooks Customer Service Phone Number +18555697467 and talk to one of their representatives.

    ReplyDelete
  39. if you still want quick assistance from QuickBooks, then dialing our toll-free number at QuickBooks Customer Service +18332442825 will help you out. Thus, You should not worry about your QuickBooks issues anymore.

    ReplyDelete
  40. To send or receive assistance, you can dial the toll-free number of Quickbooks Support Phone Number 1 877-754-1114 which is available 24 hours a day. The best questions to ask when choosing Quickbooks are what is the platform compatible with, how much does it cost, and is there any money back guarantee

    ReplyDelete
  41. if you are looking for best variety of Dining table with chair online for your dining room, the first thing that you need to consider is your dining room. Interiors are not much of a problem here as the dining table is the first thing you place in the dining room after which you start placing other interiors. You can have a look at the range of dining tables online from brands like craftatoz, HomeTown and various others. Have a look at the different sizes and shapes and choose a dining table set online that would be perfect for that empty space in your dining room.

    ReplyDelete
  42. QuickBooks is one-stop accounting software that gives you all-around support. While switching up to QuickBooks you might come across some irritating issues and errors. QuickBooks provides excellent support known as QuickBooks Phone Number +1 866-669-5068,NJ which is a kicking terminator to all the QuickBooks problems.

    ReplyDelete
  43. You can also call .Quickbooks Support Phone Number +1 855-444-2233,Hawaii to reach a live operator. When you want to talk to someone about the product, you should contact their tech support team. If you are still unsure if you want to pay for this software, you can try out a free trial of it first.

    ReplyDelete
  44. Nice Blog. If you are looking for Quickbooks Customer Service you can contact us at. +1 855-885-5111,CA.

    ReplyDelete
  45. Awesome bolg. Keep calm your Mind anwith peaceful Yoga and regulate it with peaceful yoga Suryanamaskar. yogainfo , yoga pose , yoga asanas you reach us at

    ReplyDelete
  46. To find out more about the company's software-based services and call centre hours, Quickbooks Customer Service +1 855-444-2233,Hawaii. Thus, Get answers to your QuickBooks questions by dialling the number on the blog. Get real-time solutions with experts who can walk you through your QuickBooks questions step by step, night and day.

    ReplyDelete
  47. It's often used with accounting software like Sage and Xero to help you maintain an accurate balance of your business. In the event that you're having trouble signing in, contact them at Quickbooks Customer Service +1 346-570-0854 for help with any sort of QuickBooks issue.

    ReplyDelete
  48. Quickbook Customer Service is best saved for when the company is unavailable, so you should start by dialing +1 855-675-3194,Nevada. This number connects to their central call center where they try to help people out with the most basic of questions. If they cannot help you, then you can also search for contact numbers on their website. Quickbook Phone Number

    ReplyDelete
  49. Thanks for sharing amazing blog. Here the Mistery of yoga can change your mind day to day. International Day of yoga , mind body spirit , you reach us at

    ReplyDelete
  50. QuickBooks is one-stop accounting software that gives you all-around support. While switching up to QuickBooks you might come across some irritating issues and errors. QuickBooks provides excellent support known as QuickBooks Phone Number +1 855-885-5111,CA. which is a kicking terminator to all the QuickBooks problems.

    ReplyDelete
  51. QuickBooks also offers great customer service, so no matter what time of day or night you reach out for help, they are ready to answer all your questions. If you're looking for a reliable and affordable QuickBooks accounting software, then dial Quickbooks Support Phone Number +1 855-885-5111 to get your questions answered by their team of highly experienced professionals.

    ReplyDelete
  52. When you or your company need help with QuickBooks or any other aspect of your business, dial QuickBooks Customer Service +1 855-444-2233 and talk to a support agent who will connect you directly with someone to help you. They're available 24 hours a day, 7 days a week to help you with your daily activities.

    ReplyDelete
  53. Nice Blog, Good Content. If you are looking for a QuickBooks Customer Service you can reach us at.+1 855-444-2233,Hawaii.

    ReplyDelete
  54. This can be done by dialing Quickbooks Support Phone Number +1 855-769-6757 When you do, you will reach the customer service team, who will be able to provide assistance with any question or issue that you may have.

    ReplyDelete
  55. I find it useful is the ability to call Quickbooks phone numbers for help. This can be done by dialing Quickbooks Customer Service Support Phone Number +1 888-210-4052 When you do, you will reach the customer service team, who will be able to provide assistance with any question or issue that you may have.

    ReplyDelete
  56. Quickbooks customer service is best saved for when the company is unavailable, so you should start by dialing QuickBooks Customer Service +1 855-548-4814,ID. This number connects to their central call center where they try to help people out with the most basic of questions.

    ReplyDelete
  57. It also tracks sales, accounts receivable, payroll, inventory, and much more. Dialling Quickbooks Customer Service Support Phone Number +1 855-444-2233 will provide answers to your questions, as well as provide assistance if you need help using the software. It is a flexible and easy-to-use accounting software package.

    ReplyDelete
  58. If you are one of those people whose business was destroyed by this software, then dial Quickbooks Customer Service +1 855-675-3194 to get answers to all your QuickBooks questions at no cost.

    ReplyDelete

  59. very Good Information thanks For Sharing With Us . we are providing best
    Quickbooks Customer Service+1 267-773-4333 for Resolve any issue

    ReplyDelete
  60. I really happy after read this type information Please keep sharing more such blog. Dialing Quickbooks Customer Service +1 773-516-5910 and get all Solution Of Your Problems

    ReplyDelete
  61. Nice post Thanks For Providing Good Information.
    Quickbooks customer service is best service which providing all solution according to your needs just call at +1 855-604-1500

    ReplyDelete
  62. Awesome blog!!! QuickBooks is world Class Accounting Software If you're having trouble signing in, contact them at Quickbooks Customer Service +1 855-977-3297

    ReplyDelete
  63. Our team Quickbooks Customer Service +18556753194 is always present for your Quickbooks question will help you 24 hours .

    ReplyDelete
  64. If you are having troubles with your QuickBooks Software then Quickbooks Customer Service +1 267-773-4333 is help you 24 hours for QuickBooks Solution

    ReplyDelete
  65. Very Well-written blog. Our team at
    Quickbooks support +13479820046 is available For you and Deliver high-quality Service .

    ReplyDelete
  66. Very Goof Information For me .Dial
    Quickbooks customer service +1 267-773-4333 to Connect professional Expert to diagnose your Quickbooks Problems

    ReplyDelete
  67. What a wonderful blog.If you need help with yourQuickbooks Software In case you need any technical guidance to solve QuickBooks problems, just dial at
    Quickbooks customer service and get Positive responses from our side.

    ReplyDelete
  68. Very helpful info For me .You can Get Help for Quickbooks Informations , just dial Quickbooks Customer Support +18554287237 Atlanta, GA 30307, United States for get help from experts

    ReplyDelete
  69. Very Nice Quickbooks Informations If you have any query rabout your Quickbooks account, please contact regarding Quickbooks Software then Contact Quickbooks Customer Support +1 855-604-1500

    ReplyDelete
  70. QuickBooks is popular accounting software If your business is having any issues with their software Quickbooks Cuatomer Service +1 347-982-0046

    ReplyDelete
  71. This comment has been removed by the author.

    ReplyDelete
  72. Hello. If you are am looking for help from our quickbooks experts! then contact
    Quickbooks Customer Service+1 855-604-1500 that is available 24/7.

    ReplyDelete
  73. If you are Quickbooks User and you have any issues related QuickBooks software then just Visit more- Quickbooks Customer Service+1 855-941-1563

    ReplyDelete
  74. Thanks for sharing such useful informations! QuickBooks is customer relationship management tools. While using software then you might come across some irritating issues and errors. In the event that you're having trouble signing in, contact them at Quickbooks Customer Service +1 855-377-7767

    ReplyDelete
  75. If You are Using Quickbooks Software thenyou should Contact Online Quickbooks customer service +1 602-362-8345

    ReplyDelete
  76. This comment has been removed by the author.

    ReplyDelete
  77. QuickBooks is accounting software to manage your finances, track your spending, pay your bills, forecast your income, create balance sheets ..If you're struggling with your QuickBooks account call customer service at
    QuickBooks customer service +19738784575 and get Solutions

    ReplyDelete
  78. QuickBooks is popular accounting Software, If you're looking for QuickBooks help then
    QuickBooks Customer Service +16144124790 for every problems

    ReplyDelete
  79. QuickBooks is a powerful accounting software program for manage all financial task .Have a question about a QuickBooks process then Contact QuickBooks Customer Service +1 855-624-1268 for help

    ReplyDelete
  80. Are You Looking For QuickBooks Solutions ? Dial
    QuickBooks Customer Support +1 855-563-4747 to terminate each error with satisfactory solutions

    ReplyDelete
  81. very good Information .In Case You have any query Regarding QuickBooks you can r or can contact quickbooks customer support +1 855-821-9175 the team of experts.

    ReplyDelete
  82. Your Blog is Awesome which provide valuable Information You can Also get Full Information About QuickBooks Customer Support : +1 855-966-7297 Just Click It

    ReplyDelete
  83. Good content ! QuickBooks offers great customer service, when you need Quick support then Dial Toll Free Number QuickBooks Customer Support +1 855-756-1077 , Federal Way, WA and talk to an expert.

    ReplyDelete
  84. Vey useful information ! f you are searching Accounting Service . no need to wait or call us
    Quickbooks Customer Service 1 833-738-9721

    ReplyDelete
  85. great blog ! if you any query then QuickBooks offers a customer service by dialing
    QuickBooks Support Phone Number1 866-448-6293. Our support team is available 24/7.

    ReplyDelete
  86. Get quick, help at our team available QuickBooks Customer Service +18558855111. Festival Season on contact us!

    ReplyDelete

Thanks a lot for your valuable comments :)