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

Question

我正试图在滚动窗口中居中一个模态对话框.此模态是绝对位置,因为必须在屏幕中可拖动.我使用这个插件进行可拖动功能:

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

我的问题是,如果我放置顶部,这个模态的位置绝对: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

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

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