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。

还从2.1.4更新了jquery到3.1.1，从3.3.5

更新了bootstrap到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");
      }
    }]
  });
});

根据内容，您可能会在进行操作之前尝试提示用户必须接受的提示。通过这种方式，他们承认他们已经＆＃34;阅读＆＃34;提示。

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

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

Answer 2

我当时也在使用jquery migrate插件1.2.1而导致冲突，删除此库解决了这个问题。

jQuery UI Dialog appendTo问题

2 个答案: