title: jquery-ui dialog not centering, close button strange behaviour
body: <p>Two problems with jquery-ui dialog:</p>
  
  <ol>
  <li>it always open at the top left of the screen, I need it to be centered</li>
  <li>The close box (X) and the close button work only the first time the
  dialog is opened.</li>
  </ol>
  
  <p>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.</p>
  
  <p>Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.</p>
  
  <p>The function for opening a specific web page in a jquery-ui dialog looks like this:</p>
  
  <pre><code>function openNewEvent() {
    var page = "http:/mypageurl";
    var dialog = jQuery('#dialogdiv')
    .html('&lt;iframe style="border:0px;" src="' + page + '" width="1160" height="1900"&gt;&lt;/iframe&gt;')
      .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');
  }
  </code></pre>
  
  <p>You can test it with this HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function openNewEvent() {
    var page = "http://code.jquery.com";
    var dialog = jQuery('#dialogdiv')
    .html('&lt;iframe style="border:0px;" src="' + page + '" width="300" height="500"&gt;&lt;/iframe&gt;')
      .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');
  }
  &lt;/script&gt;
    &lt;div id="dialogdiv"&gt;&lt;/div&gt;
    &lt;button onClick="openNewEvent()"&gt;Click me&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>