How to position dialog box on the center of the screen?

Question

I have JQuery dialog box and I have a problem to position the box on the center. Here is my code:

$.extend({ 
    alert: function (message, title) {
        $("<div></div>").dialog( {
            buttons: { "Ok": function () { $(this).dialog("close"); } },
            close: function (event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true,
            width:'auto',
            .position({
                    my: "center",
                    at: "center",
                    of: window
            })
        }).html(message);
    }
});

And here is how I call my jquery dialog box:

$.alert('<div>My Dialog Box test.</div>', 'My File');

Here is my working example: https://jsfiddle.net/dmilos89/wn1fy15f/1/

Also I use jquery-ui-1.12.1 Jquery version. If anyone can help please let me know.

Answer 1

which version of jquery used? if you used after 1.12 , u don't need to use position in dialog properties

Answer 2

$.extend({ 
    alert: function (message, title) {
        $("<div></div>").dialog( {
            buttons: { "Ok": function () { $(this).dialog("close"); } },
            close: function (event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true,
            width: '600px',
            position : {
                    my: "center",
                    at: "center",
                    of: window
            }
        }).html(message);
    }
});

You have an error where you are declaring the position . Also when you declared width:'auto' you need to set that to a fixed width.