I have a demo site here...

When a link is clicked, it's supposed to open in the center of the page. Instead, it opens centered horizontally, but vertically, it's at the bottom of the page.

Here's the JS I'm using to center the dialog (based on this information)

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

Here's the CSS for the dialog box (from jquery-ui.css)...

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

I've tried many variations of the position, and none seem to get it to the middle of the page.

Thoughts?

Edit: Here's how it currently looks on default...

Here's how it should look...

I have a demo site here...

When a link is clicked, it's supposed to open in the center of the page. Instead, it opens centered horizontally, but vertically, it's at the bottom of the page.

Here's the JS I'm using to center the dialog (based on this information)

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

Here's the CSS for the dialog box (from jquery-ui.css)...

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

I've tried many variations of the position, and none seem to get it to the middle of the page.

Thoughts?

Edit: Here's how it currently looks on default...

Here's how it should look...

• javascript
• jquery
• jquery-ui

2 Answers 2

It does actually start in the center of the window, but because it gets populated with data AFTER its been positioned, it expands downwards making it look like its positioned too low.

You could try giving the modal a fixed height in the CSS.

Or you could position it to the top of the window and give it a margin-top so that its, say, 100px from the top. It won't be central but it would be consistent.

in your jquery-ui.css

    .ui-dialog {
    margin-top: 150px;
    overflow: hidden;
    padding: 0.2em;
    position: absolute;
    width: 300px;
}

margin-top: 150px;, change it as per your need. Making it margin-top: 50px; !important will fix its position from top.