jQuery对话框窗口不以页面为中心

Question

我有一个演示网站here ...

单击链接时，应该在页面中心打开。相反，它打开水平居中，但垂直打开，它位于页面的底部。

以下是我用来集中对话框的JS （基于此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");
                }
            }
        });

这是对话框的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中给模态一个固定的高度。

或者你可以将它放在窗口的顶部并给它一个边缘顶部，以便它从顶部开始，例如100px。它不会是核心，但它会保持一致。

Answer 2

在你的jquery-ui.css

中

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

margin-top：150px ;,根据您的需要进行更改。使其优势：50px; ！important将从顶部确定其位置。