Home » JavaScript » jQuery » jQuery dialog example

About Rami Tayba

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.

jQuery dialog example

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.

Want to be an jQuery Ninja?

Subscribe to our newsletter and download the jQuery Programming Cookbook right now!

In order to get you prepared for your jQuery development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

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">
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
</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">
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
  <script>
  $(function() {
    // Apply dialog to MyDialog id
    $( "#MyDialog" ).dialog({
      autoOpen: false,
    });
    // Attach a click event to the button with id openDialog
    $( "#openDialog" ).click(function() {
      $( "#MyDialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>
<div id="MyDialog" title="Hello World dialog">
  <p>This is My Hello World dialog.</p>
</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

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook