0

我在这里有一个演示站点...

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

这是我用来使对话框居中的 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; }

我已经尝试了许多不同的位置，但似乎没有一个能将它放到页面中间。

想法？

编辑： 这是它目前默认的外观...... 在此处输入图像描述

这是它应该看起来的样子...... 在此处输入图像描述

4

2 回答 2

4

它实际上是从窗口的中心开始的，但是因为它在定位后填充了数据，所以它向下扩展，使它看起来位置太低了。

您可以尝试在 CSS 中为模态设置一个固定的高度。

或者你可以把它放在窗口的顶部，并给它一个 margin-top，这样它就离顶部 100px。它不会是中心的，但会是一致的。

于 2013-09-09T14:44:19.070 回答
3

在你的 jquery-ui.css

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

margin-top: 150px;，根据你的需要改变它。使其边缘顶部：50px；!important 将从顶部固定其位置。

于 2013-09-09T15:49:20.527 回答