更改模式对话框以加载接近页面顶部

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

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>