jquery-ui 对话框不居中，关闭按钮奇怪的行为答案

【问题标题】：jquery-ui dialog not centering, close button strange behaviourjquery-ui 对话框不居中，关闭按钮奇怪的行为
【发布时间】：2018-10-08 01:45:40
【问题描述】：

jquery-ui 对话框的两个问题：

它总是在屏幕的左上角打开，我需要它居中
关闭框 (X) 和关闭按钮仅在第一次使用对话框打开。

在关闭对话框的第一个实例后再次调用 openNewEvent 函数时，对话框打开但无法关闭，因为按钮不起作用。控制台上没有错误。

也许值得一提的是，代码在 Office 365/SharePoint 环境中运行。

在 jquery-ui 对话框中打开特定网页的函数如下所示：

function openNewEvent() {
  var page = "http:/mypageurl";
  var dialog = jQuery('#dialogdiv')
  .html('<iframe style="border:0px;" src="' + page + '" width="1160" height="1900"></iframe>')
    .dialog({
      title: "Page",
      autoOpen: false,
      dialogClass: 'ui-dialog,ui-widget-header',
      modal: false,
      resizable: false,
      position: { my: "center", at: "center", of: "window", collision: "none"},
      height: 1020,
      minHeight: 1020,
      width: 1200,
      buttons: {
        "Ok": function () {
          jQuery(this).dialog("close");
        }
      },
      create: function (event, ui) { 
        jQuery(event.target).parent().css('position', 'fixed');
      }
    });

  dialog.dialog('open');
}

您可以使用以下 HTML 代码对其进行测试：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
  var page = "http://code.jquery.com";
  var dialog = jQuery('#dialogdiv')
  .html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
    .dialog({
      title: "Page",
      autoOpen: false,
      dialogClass: 'ui-dialog,ui-widget-header',
      modal: false,
      resizable: false,
      position: { my: "center", at: "center", of: "window", collision: "none"},
      height: 550,
      minHeight: 550,
      width: 350,
      buttons: {
        "Ok": function () {
          jQuery(this).dialog("close");
        }
      },
      create: function (event, ui) { 
        jQuery(event.target).parent().css('position', 'fixed');
      }
    });

  dialog.dialog('open');
}
</script>
  <div id="dialogdiv"></div>
  <button onClick="openNewEvent()">Click me</button>
</body>
</html>

【问题讨论】：

请发布HTML代码进行测试
添加了html代码:)

标签： javascript jquery jquery-ui dialog

【解决方案1】：

两件事情都正常，检查你使用的 jQuery 版本是 3.3.1：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
      function openNewEvent() {
        var page = "http://code.jquery.com";
        var dialog = jQuery('#dialogdiv')
          .html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
          .dialog({
            title: "Page",
            autoOpen: false,
            dialogClass: 'ui-dialog,ui-widget-header',
            modal: false,
            resizable: false,
            height: 550,
            minHeight: 550,
            width: 350,
            buttons: {
              "Ok": function() {
                jQuery(this).dialog("close");
              }
            },
            create: function(event, ui) {
              jQuery(event.target).parent().css('position', 'fixed');
            }
          });

        dialog.dialog('open');
      }

    </script>
    <div id="dialogdiv"></div>
    <button onClick="openNewEvent()">Click me</button>
  </body>

</html>

【讨论】：

所以只是摆脱职位信息？这是我能发现的唯一区别。