jQuery UI 对话框追加问题

Question

我刚从 jquery ui 1.11.4 更新到 1.12.1，当前代码不工作

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

我必须这样做才能显示对话框

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

我尝试更改 appendTo 默认值但不起作用

$.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();
    }
});

有什么想法吗？我的应用程序中必须有很多对话框才能一个一个地更改 appendTo。

还已将 jquery 从 2.1.4 更新到 3.1.1，将 bootstrap 从 3.3.5

更新到 3.3.7

Answer 1

这是一个很好的工作示例，带有一些额外的修饰：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");
      }
    }]
  });
});

根据内容，您似乎在尝试进行提示，用户必须接受该提示才能继续操作。通过这种方式，他们承认他们有 "read" 提示。

closeOnEscape: false 在这里非常有用。此外，您可以隐藏 ui-dialog-titlebar 以防止按下关闭 (X) 按钮。这将确保他们单击唯一可用的按钮。

我还添加了一些样式来帮助改善 UI 体验。

Answer 2

我也在使用 jquery 迁移插件 1.2.1，它导致冲突，删除这个库解决了问题。

Answer 3

同样，对话框 API 功能中的“appendTo”选项对我也不起作用。我必须这样做才能让它发挥作用：

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

jQuery UI 对话框追加问题

jQuery UI Dialog appendTo issue

jquery-ui

jquery-ui-dialog