如何在具有绝对位置的滚动窗口中居中模式对话框？答案

【问题标题】：How center modal dialog in scrolled window with position absolute?如何在具有绝对位置的滚动窗口中居中模式对话框？
【发布时间】：2012-09-17 04:48:12
【问题描述】：

我正在尝试将模式对话框置于滚动窗口的中心。此模态是绝对位置，因为必须在屏幕中可拖动。我将此插件用于可拖动功能：

http://threedubmedia.com/code/event/drag

我的问题是，如果我放 top: 50% 它在中心窗口中显示模态但不考虑所有滚动窗口，则此模态具有绝对位置。

【问题讨论】：

标签： jquery css modal-dialog draggable center

【解决方案1】：

你应该使用

position:fixed

而不是绝对/相对。

position:fixed 元素相对于浏览器窗口定位。

使用它，您应该不会因为滚动而遇到任何问题。

http://www.w3schools.com/cssref/pr_class_position.asp

你也可以看到这个主题：

Fixed Positioning without Scrolling

How to place a div center of the window after scrolling

【讨论】：

我用 position: fixed 进行测试，但是 jquery 可拖动插件不起作用。
我想这是因为它的父元素的css。您能提供一些源代码或小提琴示例吗？
这在 ios safari 上效果不佳。模式后面的滚动元素将是“可点击的”，这不是模式的预期行为。

【解决方案2】：

所以您的对话框的位置设置为绝对，它是文档/正文的直接子级，对吧！？

以绝对位置居中提示模态：

// Get the document offset :
var offset = $(document).scrollTop(),

// Get the window viewport height
viewportHeight = $(window).height(),

// cache your dialog element
   $myDialog = $('#MY_DIALOG');

// now set your dialog position
$myDialog.css('top',  (offset  + (viewportHeight/2)) - ($myDialog.outerHeight()/2));

【讨论】：

【解决方案3】：

如果它在可滚动的 div 内，请确保那个原始 div 是：<div style="position:relative;">。

这样，其中一个absolute的div将保持在它的范围内，并使用其父相对div作为top:50%;的参考点

【讨论】：

【解决方案4】：

一般来说，用滚动条找到视口的中心。取窗口高度，除以 2，再加上滚动顶部。结果是应该从文档顶部偏移的像素数。

如果您的定位元素是多个可滚动元素的子元素，那么您需要考虑这些因素，但基本数学是相同的。

附带说明一下，您尝试使用的标记示例将有助于获得更准确的答案。

【讨论】：

【解决方案5】：

尝试删除位置选项

$dialog = $('<div><table width="100%" height="100%"><tr><td height="100%" align="center"><img style="vertical-align:middle"  src="css/images/ajax-loader.gif"></td></tr></table></div>')
        .html(msj)
        .dialog({
            title:"Validacion del ingreso.",
            width:350, 
            height:200, 
            modal:true,
            draggable:true,
            buttons: {
                                "Aceptar": function()
                                {
                                        $(this).dialog("close");
                                        $(this).dialog("destroy");

                                }
            }
        });

【讨论】：