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

Question

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

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

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

Answer 1

你应该使用

position:fixed

而是绝对/相对。

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

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

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

你也可以看到这个主题：

无需滚动的固定定位

滚动后如何放置窗口的div中心

Answer 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));

Answer 3

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

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

作为旁注，您尝试使用的标记示例将有助于获得更准确的答案。

Answer 4

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

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

Answer 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");

                                }
            }
        });