Question

我正在尝试将一个模态对话框置于滚动窗口中。此模态是绝对位置，因为必须在屏幕中可拖动。我使用这个插件来实现可拖动功能：

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

我的问题是，如果我放置顶部，此模态的位置绝对：50％它在中心窗口显示模态但不考虑所有滚动窗口。

Answer 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

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

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

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

Answer 4

通常，要使用滚动条查找视口的中心。取窗口高度，除以2，再加上滚动顶部。结果是应该从文档顶部偏移的像素数。

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

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

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

                                }
            }
        });

如何在位置绝对的滚动窗口中居中模态对话框？

5 个答案: