Dialog

.no-close .ui-dialog-titlebar-close {
  display: none;
}

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Theming

The dialog widget uses the jQuery UI CSS framework to style its look and feel. If dialog specific styling is needed, the following CSS class names can be used:

Which element the dialog (and overlay, if modal) should be appended to.

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

$( ".selector" ).dialog({
  autoOpen: false
});

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

$( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icons: {
        primary: "ui-icon-heart"
      },
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});

// Getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
 
// Setter
$( ".selector" ).dialog( "option", "buttons", 
  [
    {
      text: "Ok",
      icons: {
        primary: "ui-icon-heart"
      },
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
);

$( ".selector" ).dialog({
  closeOnEscape: false
});

// Getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
 
// Setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );

$( ".selector" ).dialog({
  closeText: "hide"
});

// Getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
 
// Setter
$( ".selector" ).dialog( "option", "closeText", "hide" );

$( ".selector" ).dialog({
  dialogClass: "alert"
});

// Getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
 
// Setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );

$( ".selector" ).dialog({
  draggable: false
});

// Getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
 
// Setter
$( ".selector" ).dialog( "option", "draggable", false );

$( ".selector" ).dialog({
  height: 400
});

// Getter
var height = $( ".selector" ).dialog( "option", "height" );
 
// Setter
$( ".selector" ).dialog( "option", "height", 400 );

$( ".selector" ).dialog({
  hide: { effect: "explode", duration: 1000 }
});

// Getter
var hide = $( ".selector" ).dialog( "option", "hide" );
 
// Setter
$( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } );

$( ".selector" ).dialog({
  maxHeight: 600
});

// Getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
 
// Setter
$( ".selector" ).dialog( "option", "maxHeight", 600 );

$( ".selector" ).dialog({
  maxWidth: 600
});

// Getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
 
// Setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );

$( ".selector" ).dialog({
  minHeight: 200
});

// Getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
 
// Setter
$( ".selector" ).dialog( "option", "minHeight", 200 );

$( ".selector" ).dialog({
  minWidth: 200
});

// Getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
 
// Setter
$( ".selector" ).dialog( "option", "minWidth", 200 );

$( ".selector" ).dialog({
  modal: true
});

// Getter
var modal = $( ".selector" ).dialog( "option", "modal" );
 
// Setter
$( ".selector" ).dialog( "option", "modal", true );

Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible.

The of property defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the available properties.

$( ".selector" ).dialog({
  position: { my: "left top", at: "left bottom", of: button }
});

// Getter
var position = $( ".selector" ).dialog( "option", "position" );
 
// Setter
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } );

$( ".selector" ).dialog({
  resizable: false
});

// Getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
 
// Setter
$( ".selector" ).dialog( "option", "resizable", false );

$( ".selector" ).dialog({
  show: { effect: "blind", duration: 800 }
});

// Getter
var show = $( ".selector" ).dialog( "option", "show" );
 
// Setter
$( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } );

$( ".selector" ).dialog({
  title: "Dialog Title"
});

// Getter
var title = $( ".selector" ).dialog( "option", "title" );
 
// Setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );

$( ".selector" ).dialog({
  width: 500
});

// Getter
var width = $( ".selector" ).dialog( "option", "width" );
 
// Setter
$( ".selector" ).dialog( "option", "width", 500 );

Invoke the close method:

$( ".selector" ).dialog( "close" );

Invoke the destroy method:

$( ".selector" ).dialog( "destroy" );

Retrieves the dialog's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the dialog plugin has loaded.

Invoke the instance method:

$( ".selector" ).dialog( "instance" );

Invoke the isOpen method:

var isOpen = $( ".selector" ).dialog( "isOpen" );

Invoke the moveToTop method:

$( ".selector" ).dialog( "moveToTop" );

Invoke the open method:

$( ".selector" ).dialog( "open" );

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

Invoke the method:

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );

Invoke the method:

var options = $( ".selector" ).dialog( "option" );

Sets the value of the dialog option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

Invoke the method:

$( ".selector" ).dialog( "option", "disabled", true );

Invoke the method:

$( ".selector" ).dialog( "option", { disabled: true } );

Invoke the widget method:

var widget = $( ".selector" ).dialog( "widget" );

Allow the Select2 plugin to be used within modal dialogs. The _super() call ensures elements within the dialog can still be interacted with.

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

Initialize the dialog with the beforeClose callback specified:

$( ".selector" ).dialog({
  beforeClose: function( event, ui ) {}
});

Bind an event listener to the dialogbeforeclose event:

$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );

Initialize the dialog with the close callback specified:

$( ".selector" ).dialog({
  close: function( event, ui ) {}
});

Bind an event listener to the dialogclose event:

$( ".selector" ).on( "dialogclose", function( event, ui ) {} );

Initialize the dialog with the create callback specified:

$( ".selector" ).dialog({
  create: function( event, ui ) {}
});

Bind an event listener to the dialogcreate event:

$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );

Initialize the dialog with the drag callback specified:

$( ".selector" ).dialog({
  drag: function( event, ui ) {}
});

Bind an event listener to the dialogdrag event:

$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );

Initialize the dialog with the dragStart callback specified:

$( ".selector" ).dialog({
  dragStart: function( event, ui ) {}
});

Bind an event listener to the dialogdragstart event:

$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );

Initialize the dialog with the dragStop callback specified:

$( ".selector" ).dialog({
  dragStop: function( event, ui ) {}
});

Bind an event listener to the dialogdragstop event:

$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );

Initialize the dialog with the focus callback specified:

$( ".selector" ).dialog({
  focus: function( event, ui ) {}
});

Bind an event listener to the dialogfocus event:

$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );

Initialize the dialog with the open callback specified:

$( ".selector" ).dialog({
  open: function( event, ui ) {}
});

Bind an event listener to the dialogopen event:

$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

Initialize the dialog with the resize callback specified:

$( ".selector" ).dialog({
  resize: function( event, ui ) {}
});

Bind an event listener to the dialogresize event:

$( ".selector" ).on( "dialogresize", function( event, ui ) {} );

Initialize the dialog with the resizeStart callback specified:

$( ".selector" ).dialog({
  resizeStart: function( event, ui ) {}
});

Bind an event listener to the dialogresizestart event:

$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );

Initialize the dialog with the resizeStop callback specified:

$( ".selector" ).dialog({
  resizeStop: function( event, ui ) {}
});

Bind an event listener to the dialogresizestop event:

$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</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>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>