jquery-ui dialog not centering, close button strange behaviour

Question

Two problems with jquery-ui dialog:

it always open at the top left of the screen, I need it to be centered
The close box (X) and the close button work only the first time the dialog is opened.

When the openNewEvent function is called again after closing the first instance of the dialog, the dialog opens but can't be closed, because the buttons do not work. No errors on the console.

Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.

The function for opening a specific web page in a jquery-ui dialog looks like this:

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');
}

You can test it with this HTML code:

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

Both things working, check jQuery version you're using is 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 dialog not centering, close button strange behaviour

Question

1 answers

solution1
0 ACCPTED 2018-04-27 13:45:37

jquery-ui dialog not centering, close button strange behaviour

Question

1 answers

solution1 0 ACCPTED 2018-04-27 13:45:37

solution1
0 ACCPTED 2018-04-27 13:45:37