CODEWITHSUNDEEP
javascriptjquery-uijquery
Millhorn
Millhorn

Reputation: 3176

Horizontally Center a jQuery dialog window

I have an example here.

When I open the window, it is vertically centered, but the horizontal center is far down. I want to get it centered on the screen when it pops up.

This is the jscript... 

    $(function() {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            width: 1011,
            height: 'auto',
            show: 'fade',
            hide: 'fade',
            buttons: {
                "Dismiss": function() {
                    $(this).dialog("close");
                }
            }
        });

I've tried using position: 'middle',, but it didn't work.

Upvotes: 0

Views: 3377

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

look at the documentation of position http://api.jqueryui.com/dialog/#option-position

here is how you use it:

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 1011,
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    position: {my: "center top", at:"center top", of: window },
    buttons: {
        "Dismiss": function() {
            $(this).dialog("close");
        }
    }
});

I read through the documentation. I wanted the dialog box to be centered, in the middle of the page... not centered, and at the very top. Just in the middle of the page. I've tried center left, center center ...How come there's just no center middle? – webfrogs Sep 6 '13 at 22:58

       Someone please come back... – webfrogs Sep 7 '13 at 2:04

You can use any of the following to make it in the middle of the page

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 1011,
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    position: {my: "center top", at:"center middle", of: window },
    buttons: {
        "Dismiss": function() {
            $(this).dialog("close");
        }
    }
});

OR

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 1011,
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    position: ['center', 'middle'],
    buttons: {
        "Dismiss": function() {
            $(this).dialog("close");
        }
    }
});

Upvotes: 1

Related Questions