Embed Doc
Copy Link
Readcast
Collections

CommentGo Back

Download

Javasript popup window article

In this tutorial I will show you how to create a layer based popup window withJavaScript.

Layer based Javascript popup window

Creating a popup window is maybe one of the most often used Javascript use case.However a traditional popup window is not the best choice nowadays as it is almostalways blocked by browsers. Besides this sometimes the site design requires a better alternative.To solve the above mentioned problems we can imitate popup windows using someHTML div tags, a bit of CSS and a some lines of JavaScript code.

The concept:

Let's put every html code inside a special div block and hide it by default. For a specifieduser action - like mouse over or click events - we will display the hidden layer in fron of the others. Besides this we add some exiting function to the popup window to hide it if itis not more required.

The implementation:

As I mentioned before we will create a special div block and put our popup windowcontent into this block. Let's call it to popupcontent and use this as id to identify the popup block like this:<div id="popupcontent">This is a popup window!</div>

The popup window CSS:

Let's create the relevant CSS code which format the popup window. The most important parameters are the overflow, visibility and position. I have added more parameters, just tomake the popup window more attractive. So the CSS code for the popup window look like this:

#popupcontent{ position: absolute;visibility: hidden;overflow: hidden; border:1px solid #CCC; background-color:#F9F9F9; border:1px solid #333; padding:5px;}As you can see the layer is hidden by default.

Javascript code to display popup window:

This will be the most interesting part of the tutorial. We will implement 2 functions, onefor displaying the popup window and one for hiding it. Of course the display functioncontains the main logic.What we need here:* Calculating where to position the JavaScript popup window on the display.* Adding a statusbar with a close button to hide the popup window.* Display the popup.In this example - to make it more simple - we will display the popup window in a hardcoded location. Let's say the top left point is 200,200.The window size is defined by parameters to allow the developer to display as big popupwindow as he or she wants.Inside the function body we first need to get a reference to the special div block. We cando this by using thee getElementById function in the following form:[code]var popUp = document.getElementById("popupcontent");

As we have the reference we can modify the style of the block and set the top and left position as well as the width and height. popUp.style.top = "200px"; popUp.style.left = "200px"; popUp.style.width = w + "px"; popUp.style.height = h + "px";The next step is to append a statusbar to the div block with a close button. To do this wefirst need to save the actual div block content before adding anything to it. It is because if you display the popup again then you can append the statusbar to the original content andnot to the actual with statusbar. For this we use a global variable and a code like this:if (baseText == null) baseText = popUp.innerHTML; popUp.innerHTML = baseText +"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Closewindow<button></div>";The last point is to position the statusbar at the bottom of the popup window. We can dothis by setting the top margin a bit smaller than the complete block height.Finally the showPopup function looks like this:var baseText = null;function showPopup(w,h){var popUp = document.getElementById("popupcontent"); popUp.style.top = "200px";