Question

我正在使用Bootstrap，jQuery UI创建一个对话框，并通过html验证放置了我的html。我在容器div（在body标签内）中有这个代码：

<div id="dialog" class="dialog-box" title="Deleting, are we?" style="display:none">
  <p>Are you sure you want to delete this content?</p>
  <div class="decision">
    <button class="send-delete">
      delete
    </button>
    <button class="cancel">
      cancel
    </button>
  </div>
</div>

我正在使用这个jQuery代码来激活对话框：

$("a.content-delete").click(function(e) {
  var dialogBox = document.querySelector("#dialog");
  dialogBox.setAttribute("data-content-id", id);
  $( "#dialog" ).dialog({
    modal: true,
    resizable: false,
    dialogClass: 'no-close success-dialog',
    height: 80,
    width: 310,
    position:
          {
             my: "center",
             at: "center",
             of: window
           }
  });
});

$("button.cancel").click(function(e) {
  $( "#dialog" ).dialog('close');
});

我也在对话框中应用了一些CSS：

.ui-widget.success-dialog {
    font-family:  Verdana, Geneva, sans-serif;
    font-size: .8em;
    text-align: center;
}
.ui-widget-content.success-dialog {
    background: #c4c6de;
    border: 1px solid #1f0e3e;
    color: #1f0e3e;
}

/*.ui-dialog.success-dialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}*/
.ui-dialog.success-dialog {
    outline: 0 none;
    padding: 0 !important;
}

.ui-dialog.success-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 0 !important;
    margin: 0;
}

.ui-dialog.success-dialog .ui-widget-header {
    background: #1f0e3e;
    border: 0;
    color: #ffffff;
    font-weight: normal;
}

.ui-dialog.success-dialog .ui-dialog-titlebar {
    padding: 0.1em .5em;
    position: relative;
    font-size: 1em;
}
.decision{
  width: 130px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

奇怪的是，在我的一个页面上，这是有效的。而在另一个上它并没有。我无法找到任何可能导致两页不同的问题的问题

当我在JsFiddle中使用此代码时，我无法重新创建问题。

我尝试从页面复制整个html的源代码并在小提琴中使用它，然后运行我的jQuery代码和CSS，它在小提琴中工作正常。

jquery ui对话框左上角开放

0 个答案: