How to generate Popup Window with JavaScript

Being a regular internet user and specially visit sites like Facebook, Twitter, Yahoo Mail, you might be familiar with the popup dialog windows. These are the windows that appear on the screen asking you different options or display 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 for the reason that most developers normally use HTML div element to create floating dialog windows. Following is the HTML code we used here to create buttons and popup dialog windows as shown below:

Figure 1: Popup dialog window.
Listing 1: Code for java Popup Window

<h3>Java 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 2: 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 play with these properties to display 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 Java and JavaScript code which will show you how to show/hide popup dialog windows using JavaScript and Java. You make sure you have included the required Java library reference in the head element of your page.

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

Listing 4: Complete Java and JavaScript code used hereby

<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 Java ready method. Finally there is a click event handler for btnSubmit which display the user favourite restaurant in output div element.
Listing 5: Full source code

<html>

<head>

    <title>Javascript Dialog - MrBool.com Tutorial</title>

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

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

    <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 favorite 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>

</head>

<body>

    <form id="form1" runat="server">

    <h3>JQuery Popup Dialogs</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>

    </form>

</body>

</html>

Conclusion

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

C#

Wednesday, 16 January 2013

How to generate Popup Window with JavaScript

Conclusion

No comments:

Post a Comment