我试图在滚动窗口中居中模式对话框。此模式是绝对位置,因为必须在屏幕中可拖动。我将此插件用于可拖动功能:
http://threedubmedia.com/code/event/drag
我的问题是,如果我放 top: 50% 它在中心窗口中显示模态但不考虑所有滚动窗口,则此模态具有绝对位置。
我试图在滚动窗口中居中模式对话框。此模式是绝对位置,因为必须在屏幕中可拖动。我将此插件用于可拖动功能:
http://threedubmedia.com/code/event/drag
我的问题是,如果我放 top: 50% 它在中心窗口中显示模态但不考虑所有滚动窗口,则此模态具有绝对位置。
你应该使用
position:fixed
而是绝对/相对。
position:fixed 元素相对于浏览器窗口定位。
使用它,您应该不会因为滚动而遇到任何问题。
http://www.w3schools.com/cssref/pr_class_position.asp
你也可以看到这个主题:
因此,您的对话框的位置设置为绝对,并且它是文档/正文的直接子级,对吧!?
以绝对位置居中提示模态:
// 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));
一般来说,要找到带有滚动条的视口中心。取窗口高度,除以 2,再加上滚动顶部。结果是应该从文档顶部偏移的像素数。
如果您的定位元素是多个可滚动元素的子元素,那么您将需要考虑这些,但基本数学是相同的。
作为旁注,您尝试使用的标记示例将有助于获得更准确的答案。
如果它在可滚动的 div 内,请确保原始 div 是:<div style="position:relative;">
。
这样,它div
内部的绝对值将保持在它的范围内,并使用其父相对 div 作为参考点top:50%;
尝试删除位置选项
$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");
}
}
});