jquery模态对话框定位在可滚动窗口

Question

我的页面包含大量数据，我必须向下滚动到底部才能单击按钮，这将触发 jquery 模式对话框。单击按钮时，我已将窗口滚动位置设置为页面顶部并隐藏了窗口滚动条。但是我无法将模态对话框定位到窗口的中心位置，而是定位到文档的中心。

我给出了如下代码：

$(settings.dialogDivId).dialog({
        open: function () {
            window.scrollTo(0, 0);
            $('body').css({ 'overflow': 'hidden', 'height': '100%' });

        },
        width: 400,
        modal: true,
        position: ['center', 'center'],
        buttons: {
            Ok: function () {
                $(this).dialog("close");
                $('body').css({ 'overflow': 'inherit', 'height': 'auto' });
                postbackCtrl.attr("data-validation-override", true);
                window.scrollTo(0, 0);
                postbackCtrl.click();
            },
            Cancel: function () {
                postbackCtrl.attr("data-validation-override", false);
                $(this).dialog("close");
                window.scrollTo(0, 0);
                $('body').css({ 'overflow': 'inherit', 'height': 'auto' });
            }
        }
    });

Answer 1

如果您希望它相对于其父级居中，则将您的模态对话框放置在position : relative 或fixed 以使其相对于窗口放置。

玩过left和margin-left之后：

如果您的模态框width: 200px，您必须放置模态框left : 50% 并放置margin-left:-100px。现在，您的模态对话框水平居中。

http://jsfiddle.net/ArxAG/17/