The jQuery UI .dialog( ) widget allows you to do creative things with popup dialog boxes. These boxes can do things like display more information about the topic in question. By using the .dialog() widget, a number of classes are automatically assigned to the element in question. These classes are needed for funtionality, but also can be used for styling purposes. The jQuery UI stylesheet will add styles to these classes if it is linked to in the <head> section of the document.

For complete documentation:

http://api.jqueryui.com/dialog

http://jqueryui.com/dialog

 

Required jQuery files

As with other jQuery UI widgets, you must load the UI library file along with your core jQuery .js file in the <head>...</head> section of your web page.

If you want to use the jQuery styling for the .dialog() boxes, you must link to the jQuery UI style sheets as well.  You can override this styling with your own styles, but your stylesheet must load after the jQuery stylesheet in your head section and you need to target the classes that they use.When you use these widgets there are classes loaded into the DOM by jQuery for these elements. You can use a diagnostic tool like Firebug to see which class names have been applied.

The default styling from jQuery for the dialog boxes includes a border, a bar across the top and an X for closing the dialog box.

As always, you can choose to upload the required .js files to your own hosting server and link to them at your own site, or provide an external link to Google's jQuery library files

<script src="https:/ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

 

The script for using .dialog()

You simply need to associate the id or class name within the parentheses. You may want a dialog box to appear when the page first opens or you may want to place it in a funtion associated with the .click() or .mouseover() methods. You may even chose to have a dialgo box popup when a form is submitted.

$("#dialog").dialog();

 <div id="dialog">
    <h2>Topic</h2>
    <p>Content for the dialog box</p>
</div>