Html create a popup window

Step 1 - Layer based Javascript popup window

---

Javasript 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 almost always 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 some HTML 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 specified user 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 it is not more required.

 

The implementation: 

As I mentioned before we will create a special div block and put our popup window content into this block. Let's call it to popupcontent and use this as id to identify the popup block like this:

Code:

1. id="popupcontent">This is a popup window!

Javascript F1

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 to make the popup window more attractive. So the CSS code for the popup window look like this:

Code:

1. #popupcontent {
2. position: absolute;
3. visibility: hidden;
4. overflow: hidden;
5. border :1px solid #CCC;
6. background-color: #F9F9F9;
7. border :1px solid #333;
8. padding :5px;
9. }

Javascript F1

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, one for displaying the popup window and one for hiding it. Of course the display function contains 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 hard coded 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 popup window as he or she wants.

Inside the function body we first need to get a reference to the special div block. We can do this by using thee getElementById function in the following form:

Code:

1. var popUp = document.getElementById("popupcontent");

Javascript F1

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.

Code:

1. popUp. style. top = "200px";
2. popUp. style. left = "200px";
3. popUp. style. width = w + "px";
4. popUp. style. height = h + "px";
5.  

Javascript F1

The next step is to append a statusbar to the div block with a close button. To do this we first 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 and not to the actual with statusbar. For this we use a global variable and a code like this:

Code:

1. if (baseText == null) baseText = popUp.innerHTML;
2. popUp.innerHTML = baseText +
3. "

   \"statusbar\">\"hidePopup();\">Close window

   ";
4.  

Javascript F1

The last point is to position the statusbar at the bottom of the popup window. We can do this by setting the top margin a bit smaller than the complete block height. 

Finally the showPopup function looks like this:

Code:

1. var baseText = null;
2.  
3. function showPopup (w,h ) {
4. var popUp = document. getElementById ( "popupcontent" );
5.  
6. popUp. style. top = "200px";
7. popUp. style. left = "200px";
8. popUp. style. width = w + "px";
9. popUp. style. height = h + "px";
10.  
11. if (baseText == null ) baseText = popUp. innerHTML;
12. popUp. innerHTML = baseText +
13. "

    \"statusbar\">\"hidePopup();\">Close window

    ";
14.  
15. var sbar = document. getElementById ( "statusbar" );
16. sbar. style. marginTop = (parseInt (h ) -40 ) + "px";
17. popUp. style. visibility = "visible";
18. }

Javascript F1

Hiding the popup window: 

Hiding the popup window is a much more simple task. We just need to get a reference to the popup div block and set the visibility to hidden. The complete code just takes 2 lines of code:

Code:

1. function hidePopup(){
2. var popUp = document.getElementById("popupcontent");
3. popUp.style.visibility = "hidden";
4. }

Javascript F1

Extending the HTML code: 

Finaly we can extend our HTML code and call the showPopup() function on an event you want. For example:

Code:

1. href="#" onmouseover="showPopup(300,200);" >Open popup

Javascript F1

That's all.