javascript - 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 中为模态框指定固定高度。

或者您可以将其放置在窗口的顶部，并给它一个顶部边距，例如距离顶部 100 像素。它不会是中心，但会保持一致。