javascript - Change modal dialog to load close to top of the page

Question

I have a jQuery modal dialog that is loading perfectly fine but my issue is that I am using little old version of jQuery(1.12.4) and I cannot upgrade it and I want to center the modal close to the top of the page like I have it in this Fiddle. I am using the below code to make it work and position: ['center',20], is making it close to the top but again since I am using an old version of the jQuery it is not working for me. Can someone suggest any other alternaate.

$('#open').click(function() {
    $('#dialog').dialog('open');

});

$(document).ready(function() {
    jQuery("#dialog").dialog({
        autoOpen:false,
        width:500,
        position: ['center',20],               
        modal: true,
        resizable: true,
        draggable: true,
        closeOnEscape: true,        
        title: "Alerts",       
        buttons: {
            OK: function () {
                $(this).dialog("close");
            }
        }
    });
});

In my case loading on the top left corner as shown below

question from:https://stackoverflow.com/questions/65851459/change-modal-dialog-to-load-close-to-top-of-the-page

Answer 1

According to the documentation you need to change this line from:

position: ['center',20], 

to:

position: { my: "center", at: "top", of: window },

Your updated fiddle here, the snippet:

$('#open').click(function() {
  $('#dialog').dialog('open');

});



$(document).ready(function() {
  jQuery("#dialog").dialog({
      autoOpen:false,
      width:500,
      position: { my: "center", at: "top", of: window },               
      modal: true,
      resizable: true,
      draggable: true,
      closeOnEscape: true,        
      title: "Alerts",       
      buttons: {
          OK: function () {
              $(this).dialog("close");
          }
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

<div id="dialog">modal dialog</div>
<a href="#" id="open">Open dialog</a>