Elegant JavaScripts: Pop up window with JQuery-UI Dialog() method

Some times it is better to offer popup windows rather than changing the whole page in our web applications. But It is quite difficult to implement it with pure JavaScript, HTML and CSS.

Pop up windows can be easily implemented using JQuery-UI library. Most interesting thing is,
it is..

Movable
Re-sizable

Download the JQuery and JQuery UI libraries. (You can download JQuery-UI from here.)

Add reference to JQuery, JQuer-UI (both JavaScript and CSS)
EX:


<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.11.3.js"></script>
<script src="jquery-ui.js"></script>

Then call JQuery UI dialog() method on a element that need to be displayed as pop up window


<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>

Example 1

Here is a simple complete example from JQuery UI site.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

Example 2

Here is a complete example for making a customized pop up window with a title bar and a content area.
This example load a separate HTML page ("popup.html") to a div (div with class "dialog-modal") with Open method. Different API s are provided to customize pop up as you want by JQuery UI team.(show and hide APIs also used in this example)


<html>
    <head>    
        <link rel="stylesheet" href="jquery-ui.css">     
    </head>
    <body>
        <h3>Making A Pop Up window</h3>
        <input type="button" value="Click to pop Up menu" onclick="popupView()">         
        <div class="dialog-modal" style="display: none;">        
         </div>         
        <script src="jquery-1.11.3.js"></script>
        <script src="jquery-ui.js"></script>
        <script>        
            function popupView() {           
                    $(".dialog-modal").dialog({                      
                        open: function () {
                            $(this).load('popup.html', function () {
                                $(this).dialog('open');
                            });                        
                        },
                        show: {
                            effect: "fade",
                            duration: 400
                        },
                        hide: {
                            effect: "fade",
                            duration: 400
                        }
                    });               
            }            
        </script>
    </body>
</html>

Pop up window with JQuery-UI Dialog() method

Example 1

Example 2

8 comments:

Popular Posts

Categories