jQuery 如何在具有绝对位置的滚动窗口中居中模式对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12586840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How center modal dialog in scrolled window with position absolute?
提问by paganotti
I'm trying to center a modal dialog in scrolled window. This modal are position absolute because must be draggable in screen. I use this plugin for draggable function:
我试图在滚动窗口中居中显示一个模态对话框。此模式是绝对位置，因为必须可在屏幕中拖动。我将此插件用于可拖动功能：
http://threedubmedia.com/code/event/drag
http://threedubmedia.com/code/event/drag
My problem is that this modal has position absolute if I put top: 50% it display modal in center window but not considering all scrolled window.
我的问题是，如果我把这个模态放在绝对位置：50% 它在中心窗口中显示模态但不考虑所有滚动窗口。
回答by gotqn
You should use
你应该使用
position:fixed
instead absolute/relative.
而是绝对/相对。
position:fixed The element is positioned relative to the browser window.
position:fixed 元素相对于浏览器窗口定位。
Use this and you should not face any issues due to scrolling.
使用它，您应该不会因滚动而面临任何问题。
http://www.w3schools.com/cssref/pr_class_position.asp
http://www.w3schools.com/cssref/pr_class_position.asp
You can see this topics, too:
您也可以查看此主题：
Fixed Positioning without Scrolling
回答by Stphane
So your dialog has its position set to absolute and it is an immediate child of the document/body, right !?
因此，您的对话框将其位置设置为绝对，并且它是文档/正文的直接子级，对吧！？
Centering a prompted modal with absolute position:
以绝对位置居中提示模式：
// 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));
回答by Mark Pieszak - Trilon.io
If it is inside of a scrollable div, make sure thatoriginal div is: <div style="position:relative;">.
如果它是一个滚动的div中，请确保该原始DIV是：<div style="position:relative;">。
That way, a divinside it that is absolutewill stay within the confines of it, and use its parent relative div as a reference point for top:50%;
这样，绝对的div内部将留在它的范围内，并使用其父相对 div 作为参考点top:50%;
回答by Rozwel
In general, to find the center of the viewport with scroll bars. Take window height, divided by 2, plus scroll top. Result is the number of pixles that something should be offset from the document top.
一般来说，用滚动条找到视口的中心。取窗口高度除以 2，再加上滚动顶部。结果是应该从文档顶部偏移的像素数。
If your positioned element is a child of more than one scrollable element then you will need to account for those, but the basic math is the same.
如果您的定位元素是多个可滚动元素的子元素，那么您将需要考虑这些元素，但基本的数学原理是相同的。
As a side note, an example of the markup you are trying to use would help get more exact answers.
作为旁注，您尝试使用的标记示例将有助于获得更准确的答案。
回答by KristKing
try deleted the position option
尝试删除位置选项
$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");
}
}
});
