我怎么把javascript css弹出div中心，不管屏幕分辨率是多少？
[英]how do I center javascript css popup div, no matter what the screen resolution?
问题描述
我有以下代码，在禁用背景时打开一个新的弹出窗口，问题是我必须将它定位为从顶部100px（已经通过CSS #dialog获得）以及屏幕中心，无论用户的分辨率是多少？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}
#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>
</body>
</html>
7 个解决方案
解决方案1
41 已采纳 2012-06-13 19:16:50
基于CSS的中心解决方案：
您需要使用这些样式使其显示为死点：
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
所以应该指定position 。 top和left应为50% 。 margin-left和margin-top应分别为框的宽度和高度的负半边。
请注意，如果您希望弹出窗口显示在中心，即使页面滚动，您也必须使用position:fixed而不是缩写，它在IE6中不起作用。
解决方案2
3 2012-06-13 20:06:53
你需要的是一个灯箱 。
要创建它，您应该修改HTML，CSS和JS代码。
假设您的灯箱仅包含字符串“登录表单”。 （你可以把你想要的一切都放在那里）HTML代码应如下所示：
<div id = "loginBox">login form</div>
现在，我们需要用CSS隐藏它：
div#loginBox {
display: none;
}
现在我们的盒子不可见了。 让我们修改我们的盒子，因为你希望它从顶部100px：
div#loginBox {
display: none;
top: 100px;
}
我们将担心以后禁用后台。
我们的下一个工作是制作一个按钮，在需要时显示该框。 十分简单：
<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>
请注意，我们不需要“href”属性，因为这会在单击和其他不需要的行为上移动屏幕。
让我们通过JS在按钮上附加事件处理程序：
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
document.getElementsById("loginBox").style.display = "inline-block"; // or "inline"
}
window.onload = function() {
var login_box = document.getElementsById("loginBox");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
}
}
但是你希望它在屏幕的中心？ 那么函数是这样的：
function display_box() {
var theBox = document.getElementsById("loginBox").style,
left = document.width / 2 - 50; // 150 because it is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
}
我猜你会想要在某个时候关闭窗口并使“禁用背景”效果。 为此，你可以创建一个在整个屏幕上扩展的div类，在其上附加一个“display”事件，在css中放入一些z-index以确保loginBox超过“禁用的背景”，并附加一个“关闭“background”div上的loginBox“事件。 现在最终的代码如下所示：
请注意，我们只关心登录按钮的位置，因为另一个在视图中隐藏，然后由JS修改：
HTML：
<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>
CSS：
div#loginBox {
display: none;
top: 100px;
width: 300px; #it is important to know the width of the box, to center it correctly
z-index: 2;
}
div#backgroundDarkener {
background: #000;
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
# needless to say, you should play with opacity or if you want your
# css to validate - background image (because I suspect it won't
# validate for old versions of IE, Safari, etc.) This is just a suggestion
}
JS：
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
var theBox = document.getElementsById("loginBox").style,
background = document.getElementsById("loginBox").style,
left = document.width / 2 - 150; // 150 is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
background.display = "inline-block";
}
function hide_box() {
document.getElementsById("loginBox").style.display = "none";
document.getElementsById("backgroundDarkener").style.display = "none";
}
window.onload = function() {
var login_box = document.getElementsById("loginBox"),
background = document.getElementsById("backgroundDarkener");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
background.addEventListener( "click", hide_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
background.attachEvent( "onclick", hide_box );
}
}
解决方案3
2 2012-06-13 19:15:15
谷歌快速搜索发现了这一点 ;
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
解决方案4
2 2015-02-09 19:26:06
这就是flexbox现在救援的地方！
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
解决方案5
1 2014-05-27 06:11:27
你需要使用这些样式来制作div中心：
width:500px;
left:0;
right:0;
margin:0 auto;
解决方案6
1 2016-02-18 15:42:12
这样做：
.body {
position: relative;
}
.popup {
position: absolute;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
没关系屏幕或弹出窗口大小。 这将使<div class="popup"></div>居中。
解决方案7
0 2012-06-13 19:15:58
简单， margin: 100px auto; 。 没有必要在JavaScript中进行计算。
无论访问者滚动的页面有多低，如何使DIV停留在屏幕顶部？
[英]How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls?
如何在JavaScript中相对于窗口大小在屏幕上居中显示项目？
[英]How do I center an item on the screen in relation to the window size in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.