Javasript popup window


Home - Tutorials - Windows and Frames

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

Tutorial info:


Name:Javasript popup window
Total steps:1
Category:Windows and Frames
Date:2008-02-19
Level:Beginner
Product:See complete product
Viewed:142564

Bookmark Javasript popup window



AddThis Social Bookmark Button

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

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:

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");

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.  

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. "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
  4.  

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. "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
  14.  
  15. var sbar = document.getElementById("statusbar");
  16. sbar.style.marginTop = (parseInt(h)-40) + "px";
  17. popUp.style.visibility = "visible";
  18. }

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

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. <a href="#" onmouseover="showPopup(300,200);" >Open popup</a>

That's all. 






Tags: javascript popup window, javascript popup, popup window, javascript, popup, window

Javasript popup window - Table of contents
Step 1 - Layer based Javascript popup window



GAD Tower


F1 Site Family
AJAX F1
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows F1

Family tutorials
PHP Array
PHP Redirect
PHP Session
AJAX PHP
AJAX File Upload
AJAX Rating System
MySQL Create User
Mysqldump Example
MySQL Concat

Total time: 0.2051