jQuery UI Dialog appendTo issue

Question

I just update from jquery ui 1.11.4 to 1.12.1 and current code doesn't work

$('<div />').dialog();

I have to do this to show the dialog

$('<div />').appendTo('body').dialog();

I try to change appendTo default but doesn't work

$.extend($.ui.dialog.prototype.options, {
    position: {
        my: "top",
        at: "center top",
        of: window
    },
    classes: {
        "ui-dialog": "box-shadow display-inline-table"
    },
    appendTo: 'body',
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    close: function(event, ui){
        $(this).remove();
    }
});

Any idea? I have to many dialogs in my app to change appendTo one by one.

Also have updated jquery to 3.1.1 from 2.1.4 and bootstrap to 3.3.7 from 3.3.5

Answer 1

I was also using jquery migrate plugin 1.2.1 and it cause conflict, removing this library solve the problem.

Answer 2

Here is a nice working example with a few extra touches: http://jsfiddle.net/Twisty/f700oxds/4/

HTML

<p>Hello World!</p>
<div id="dialog-message" title="Important information">
  <span class="ui-state-default">
  <span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span>
  </span>
  <div style="margin-left: 23px;">
    <p>We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
      <br />
      <br /> Our hotel will reopen at 11th of January 2011.
      <br />
      <br /> Another line which demonstrates the auto height adjustment of the dialog component.
    </p>
  </div>
</div>

CSS

body {
  font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}

.ui-dialog-osx {
  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  border-width: 0 8px 8px 8px;
}

.ui-dialog-osx .ui-dialog-titlebar {
  display: none;
}

.ui-dialog-osx .default-btn {
  border: 1px solid #222222;
  color: #222222;
  font-weight: bold;
  background-color: #c5c5c5;
}

.ui-dialog-osx .default-btn:hover {
  background: #4787ed;
  color: #ffffff;
}

JavaScript

$(function() {
  $("#dialog-message").dialog({
    closeOnEscape: false,
    modal: true,
    draggable: false,
    resizable: false,
    position: {
      my: 'center top',
      at: 'center top+20',
      of: window
    },
    hide: 'blind',
    width: 400,
    classes: {
      "ui-dialog": "ui-dialog-osx"
    },
    buttons: [{
      text: "I've read and understand this",
      class: "default-btn",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
});

Based on the content, it looks like you're trying to make a prompt, that the User must accept, before they proceed. In this way, they acknowledge that they have "read" the prompt.

The closeOnEscape: false is very helpful here. Also, you can hide the ui-dialog-titlebar to prevent the close (X) button from being pressed. This will ensure they click the only button available.

I also added some styling to help improve the UI experience.

Answer 3

Similarly, "appendTo" option in the dialog API function didn't also work for me. I had to do this to make it work:

$("#dialogForm").dialog({ 
    autoOpen: false, 
    modal: true 
}); 
var uiDialog = $('#dialogForm').closest('.ui-dialog.ui-widget');
uiDialog.appendTo("#divIdToAppendTo");