jQuery對話框窗口不在頁面中心

Question

我在這里有一個演示站點...

單擊鏈接后，該鏈接應在頁面中心打開。 而是以水平居中的方式打開，但以垂直方向在頁面的底部。

這是我用來使對話框居中的JS （基於此信息 ）

    $(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");
                }
            }
        });

這是對話框的CSS（來自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; }

我已經嘗試過許多位置變化，但似乎沒有一個變化到頁面的中間。

有什么想法嗎？

編輯：這是當前默認情況下的樣子...

這是它的外觀...

Answer 1

它實際上確實從窗口的中心開始，但是由於它在被定位后填充了數據，因此它向下擴展使其看起來像定位得太低。

您可以嘗試在CSS中為模式賦予固定的高度。

或者，您也可以將其放置在窗口頂部，並在其頂部留一個邊距，以使其距頂部100像素。 它不會是中心，但是會保持一致。

Answer 2

在你的jquery-ui.css中

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

margin-top：150px ;，根據需要進行更改。 使其距頁邊距：50px； ！important將從頂部固定其位置。