jQuery

jQuery dialog example

EDITORIAL NOTE: In this post, we feature a jQuery dialog example. A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default.

jQuery UI is a collection of jQuery plugins used to enhance the web application user interface. Inside this library we find many reusable components for interactions, effects, widgets and more.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. http://jqueryui.com/

What is the jQuery Dialog

jQuery Dialog is a powerful JavaScript popup window built-in the jQuery user interface library (jQuery ui) and it’s mostly used to show an alert message box or simple html forms such as log in/signup forms. The dialog box is mainly composed from two section, header and body but it’s also fully customizable to allow developers makes own structure.

In this example, I will introduce different uses of this overlay, starting with a Hello World example.

1. Hello World dialog

First, you need to download the jQuery and jQuery ui libraries from here and here or use one of CDNs provided on the jQuery Website.
Create an empty HTML file and put into the code like the following:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dialog Example - Hello World!</title>
<!-- todo: add scripts and css -->
</head>
<body>
<!-- todo: add html anchor and div to show dialog -->
</body>
</html>

Now put the scripts and style references between the head tags.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dialog Example - Hello World!</title>
  <link href="jquery-ui.css" rel="stylesheet">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery-ui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>
<!-- todo: add html anchor and div to show dialog -->
</body>
</html>

Your page is now ready, let’s add some code to run the hello world dialog.

I will create between the body tags a DIV element with id="MyDialog", this id is used in the selector to apply the dialog() event. Also, I will add to this DIV the title attribute that should be showed as Dialog header.

By default dialog() has the property autoOpen set to true, so I want to set it false then add a button to lunch the dialog. The full code will be:

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dialog Example - Hello World!</title>
  <link href="jquery-ui.css" rel="stylesheet">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery-ui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%24(function()%20%7B%0A%20%20%20%20%2F%2F%20Apply%20dialog%20to%20MyDialog%20id%0A%20%20%20%20%24(%20%22%23MyDialog%22%20).dialog(%7B%0A%20%20%20%20%20%20autoOpen%3A%20false%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%2F%2F%20Attach%20a%20click%20event%20to%20the%20button%20with%20id%20openDialog%0A%20%20%20%20%24(%20%22%23openDialog%22%20).click(function()%20%7B%0A%20%20%20%20%20%20%24(%20%22%23MyDialog%22%20).dialog(%20%22open%22%20)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%0A%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>




<div id="MyDialog" title="Hello World dialog">
  

This is My Hello World dialog.

</div>




<!-- Button lunch dialog -->
<button id="openDialog">Click  me</button>
</body>
</html>

The result of this example is:

jQuery Dialog Example - Hello World
jQuery Dialog Example – Hello World

2. Advanced dialog example

Repeating same steps as above, but this time, I will replace the script section by the following code:

  $(function() {
    $( "#MyDialog" ).dialog({
      autoOpen: false,
      resizable: false, // prevent resize of the dialog
      height:250, // set the height to 250px
      modal: true, // show a modal overlay in background
      buttons: {
        "Save": function() {
		  // do your business code here
		  alert("you've press save");
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
	
    $( "#openDialog" ).click(function() {
      $( "#MyDialog" ).dialog( "open" );
    });
  });

As you see, the function dialog() take new options. The option resizable is used to allow or prevent dialog resizing. I’ve fixed the dialog height to 250px. The modal option is very important in case we need to focused user attention on the alert box, an overlay background is shown behind the dialog that make the box more attractive.

Among these options, I’ve also defined the buttons option that declare 2 buttons for this dialog and we can assign a callback function on each one.

We can do more advanced scripts with the dialog jQuery plugin. Now, I advise you to read carefully the examples and try coding from scratch.

Download the source code for dialog

This was an example of jQuery Dialog.

Download
You can download the full source code of this example here: jQueryDialogExamples

Rami Tayba

Rami Tayba is a Software Engineer graduated from Lebanese University, he is experienced in web development and IT project management. During his experience, he was leading various teams and has been involved into many large projects from analysis and design to implementation.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button