Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create Popup Windows with JavaScript

In this article we will learn how to make a pop-up dialog box using javascript.

With HTML we can open a page in a new window by using target="_blank". The problem with this is that we have no control over the size of the new window that is opened, where it is positioned on the screen, or what browser control bars display on that window.

We can gain that control over the popup window that we are opening by using Javascript to open the new window instead of HTML. The content of the new window can either be a separate web page or can be dynamically created by the Javascript.

The window.open Javascript method is used to open a new browser window. The method takes three parameters.

  • The first parameter contains the file name of the web page that is to be opened in the new window.
  • The second parameter contains a name that is being assigned to the new window. If we use the same name for several different popup calls then the second and subsequent calls will not open a new popup window but will instead use the one of the same name that is already open.
  • The third parameter defines the size of the window, what toolbars it is to display, and whether or not it can be resized by your visitors. In the example we have set the height of the new window to 255 pixels and the width to 250 pixels. Also no toolbars, menu bar, status bar, scrollbars, or directories will be displayed for the new window which cannot be resized by your visitors.

For most people, the main browser window is the only one they ever use or need. However, it is possible for another window to be opened up to allow you to either view another page while retaining the existing page in the main window, or to open up a remote window that can control or be controlled by the main browser window.

Another browser window can be simply opened using HTML and the TARGET attribute, either in a link or on a form:

Listing 1: Using Target Attribute

<a href=”testpage.htm” target="anotherWindowName">Open new window</a>

or:

<form action="testpage.htm" target="anotherWindowName">
<input type="submit" value="Open new window">
</form>

As long as the TARGET attribute specifies a window name that is not already open, a new window will be created mimicing the existing window. If the window already exists, then the contents will be changed instead.

The problem with this approach is that apart from the window name there is nothing in common between the two windows. You can change the location of the new window using a similar link for form target - but that's it. Whereas using JavaScript and the window.open() method, it is possible to control the look and feel of the new window, to have control over its contents, and also to be controlled by the new window

Being a regular internet user, you might be familiar with the popup dialog windows. These are the windows that appear on the screen asking you different options or displaying information or warning messages. Popup dialog windows are child windows that are commonly used in GUI systems and User Interface designs to interact with the user.

This is done without disturbing the main application or window workflow.

The first thing you need is the basic HTML code to create a popup dialog box. Most developers normally use HTML div element to create floating dialog windows.

Popup dialog window

Figure 1: Popup dialog window.

Following is the HTML code we used here to create buttons and popup dialog windows as shown below:

Listing 2: Code for JavaScript Popup Window

<h3>JavaScript Popup Window</h3>
    
<input type="button" id="btnShowSimple" value="Simple Dialog" />
<input type="button" id="btnShowModal" value="Modal Dialog" />
    
<br /><br />       
    
<div id="output"></div>
    
<div id="overlay" class="web_dialog_overlay"></div>
    
<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title">Online Survey</td>
         <td class="web_dialog_title align_right">
            <a href="#" id="btnClose">Close</a>
         </td>
      </tr>
      <tr>
         <td> </td>
         <td> </td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <b>Select your favourite restaurant? </b>
         </td>
      </tr>
      <tr>
         <td> </td>
         <td> </td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <div id="brands">
               <input id="brand1" name="brand" type="radio" checked="checked" value="Dominos" /> Dominos
               <input id="brand2" name="brand" type="radio" value="US Pizza" /> US Pizza 
               <input id="brand3" name="brand" type="radio" value="Pizza Hut" /> Pizza Hut
            </div>
         </td>
      </tr>
      <tr>
         <td> </td>
         <td> </td>
      </tr>
      <tr>
         <td colspan="2" style="text-align: center;">
            <input id="btnSubmit" type="button" value="Submit" />
         </td>
      </tr>
   </table>
</div>

In the above HTML code, there are two important elements. The first element is the div tag with the id"overlay". This div will cover the entire page width and height to create a semi-transparent background when the popup dialog window will appear on the screen.

<div id="overlay" class="web_dialog_overlay"></div>

The second important element is the div tag with the id "dialog". This div will be used as popup dialog and can contain any type of HTML inside. We put an HTML table and created a simple online survey hereby.

Listing 3: Using the div

<div id="dialog" class="web_dialog">
...
</div>

You may have noticed that the HTML code shown above is using the CSS classes web_dialog_overlay,web_dialog, web_dialog_title etc.

Listing 3: CSS Code

<style type=”text/css">

.web_dialog_overlay
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog
{
   display: none;
   position: fixed;
   width: 380px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}
.web_dialog_title
{
   border-bottom: solid 2px #336699;
   background-color: #336699;
   padding: 4px;
   color: White;
   font-weight:bold;
}
.web_dialog_title a
{
   color: White;
   text-decoration: none;
}
.align_right
{
   text-align: right;
}

</style>

There are few important things to explain in the above CSS code. Note how the .web_dialog_overlay class top, right, bottom, left, height and width properties are set to make sure it covers the entire browser display area. Furthermore, notice how the transparency is set using opacity, -moz-opacity and filter properties. In the.web_dialog class the important properties are width, height, top, left, margin-left and margin-top which are set appropriately to make sure the popup dialog appears in the center of the screen. You can change these properties to display a popup dialog anywhere you want. The display property for both classes is set to none to keep both div elements hidden.

Another important property is the z-index which sets the stack order of different elements on the screen. The element with the greater stack order will always be in front of the elements with the lower stack order.

Let us move to the JavaScript code which will show you how to show/hide popup dialog windows using JavaScript.

<script src="scripts/javascript-1.4.3.min.js" type="text/javascript"></script>

Listing 4: Complete JavaScript code listing:

<script type="text/javascript">

   $(document).ready(function ()
   {
      $("#btnShowSimple").click(function (e)
      {
         ShowDialog(false);
         e.preventDefault();
      });

      $("#btnShowModal").click(function (e)
      {
         ShowDialog(true);
         e.preventDefault();
      });

      $("#btnClose").click(function (e)
      {
         HideDialog();
         e.preventDefault();
      });

      $("#btnSubmit").click(function (e)
      {
         var brand = $("#brands input:radio:checked").val();
         $("#output").html("<b>Your favourite restaurant: </b>" + brand);
         HideDialog();
         e.preventDefault();
      });

   });

   function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);

      if (modal)
      {
         $("#overlay").unbind("click");
      }
      else
      {
         $("#overlay").click(function (e)
         {
            HideDialog();
         });
      }
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   } 
        
</script>

In the above code, there are two JavaScript functions ShowDialog() and HideDialog() defined to show/hide both transparent overlay div and dialog window. The ShowDialog function also has conditional code to implement simple or modal dialog windows. If you are displaying the modal window then clicking the overlaydiv will not hide the dialog box, and user has to close the popup window using the Submit button or Close link on top. These two functions are called from different button click events in the Javascript ready method. Finally there is a click event handler for btnSubmit which display the user favorite restaurant in output div element.

Conclusion

Hope the tutorial was useful and now you can start making use of JavaScript based Popup dialog in the web applications you are using.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login