Question

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>

Answer 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>

jquery-ui对话框没有居中，关闭按钮奇怪的行为

1 个答案: