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.
If the content length exceeds the maximum height, a scrollbar will automatically appear.
A bottom button bar and semi-transparent modal overlay layer are common options that can be added.
A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close'). A more in-depth explanation with a full demo is available on the Nemikor blog.
$("#dialog").dialog();
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
</body>
</html>
This event is triggered when dialog is created.
create event as an init option.
$( ".selector" ).dialog({
create: function(event, ui) { ... }
});create event by type: dialogcreate.
$( ".selector" ).bind( "dialogcreate", function(event, ui) {
...
});This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.
beforeClose event as an init option.
$( ".selector" ).dialog({
beforeClose: function(event, ui) { ... }
});beforeClose event by type: dialogbeforeclose.
$( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {
...
});This event is triggered when dialog is opened.
open event as an init option.
$( ".selector" ).dialog({
open: function(event, ui) { ... }
});open event by type: dialogopen.
$( ".selector" ).bind( "dialogopen", function(event, ui) {
...
});This event is triggered when the dialog gains focus.
focus event as an init option.
$( ".selector" ).dialog({
focus: function(event, ui) { ... }
});focus event by type: dialogfocus.
$( ".selector" ).bind( "dialogfocus", function(event, ui) {
...
});This event is triggered at the beginning of the dialog being dragged.
dragStart event as an init option.
$( ".selector" ).dialog({
dragStart: function(event, ui) { ... }
});dragStart event by type: dialogdragstart.
$( ".selector" ).bind( "dialogdragstart", function(event, ui) {
...
});This event is triggered when the dialog is dragged.
drag event as an init option.
$( ".selector" ).dialog({
drag: function(event, ui) { ... }
});drag event by type: dialogdrag.
$( ".selector" ).bind( "dialogdrag", function(event, ui) {
...
});This event is triggered after the dialog has been dragged.
dragStop event as an init option.
$( ".selector" ).dialog({
dragStop: function(event, ui) { ... }
});dragStop event by type: dialogdragstop.
$( ".selector" ).bind( "dialogdragstop", function(event, ui) {
...
});This event is triggered at the beginning of the dialog being resized.
resizeStart event as an init option.
$( ".selector" ).dialog({
resizeStart: function(event, ui) { ... }
});resizeStart event by type: dialogresizestart.
$( ".selector" ).bind( "dialogresizestart", function(event, ui) {
...
});This event is triggered when the dialog is resized. demo
resize event as an init option.
$( ".selector" ).dialog({
resize: function(event, ui) { ... }
});resize event by type: dialogresize.
$( ".selector" ).bind( "dialogresize", function(event, ui) {
...
});This event is triggered after the dialog has been resized.
resizeStop event as an init option.
$( ".selector" ).dialog({
resizeStop: function(event, ui) { ... }
});resizeStop event by type: dialogresizestop.
$( ".selector" ).bind( "dialogresizestop", function(event, ui) {
...
});This event is triggered when the dialog is closed.
close event as an init option.
$( ".selector" ).dialog({
close: function(event, ui) { ... }
});close event by type: dialogclose.
$( ".selector" ).bind( "dialogclose", function(event, ui) {
...
});Remove the dialog functionality completely. This will return the element back to its pre-init state.
Disable the dialog.
Enable the dialog.
Get or set any dialog option. If no value is specified, will act as a getter.
Set multiple dialog options at once by providing an options object.
Returns the .ui-dialog element.
Close the dialog.
Returns true if the dialog is currently open.
Move the dialog to the top of the dialogs stack.
Open the dialog.
The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>.