How to center a jquery dialog to display in the center of the currently visible browser area?

I can center the dialog with the default position, which is the exact center of the page. However, when the page height is greater than the browser window, when the dialog box opens, it brings the entire page back to the center.

I would like the dialog to be centered relative to the screen, not the page.

I believe this is what I use to initialize it:

dialogDiv.dialog(
{
    title: "Edit Rating",
    width: 'auto',
    height: 'auto',
    modal: true,
    resizable: false
}); 

      

+3


source to share


2 answers


I think it may not take much effort.

$("#dialog").dialog();

      

According to this article, the default is center:

http://jqueryui.com/dialog/#default



I tried this too and it worked

This is even better:

$("#myDialog").position({
my: "center",
at: "center",
of: window
});

      

Sample code: http://jqueryui.com/demos/position/

0


source


    $("#dialog").dialog("option", "position", "center")

      



0


source







All Articles