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将从顶部固定其位置。