JQuery-UI диалог не центрируется, кнопка закрытия странное поведение - PullRequest
Новая
       24

JQuery-UI диалог не центрируется, кнопка закрытия странное поведение

0 голосов
/ 27 апреля 2018

Две проблемы с диалогом jquery-ui:

  1. он всегда открывается в левом верхнем углу экрана, мне нужно, чтобы он был в центре
  2. Окно закрытия (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>

1 Ответ

0 голосов
/ 27 апреля 2018

Обе вещи работают, проверьте, что вы используете версию 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>
...