0

. .我在页面中间有一个按钮。. .on 点击​​会弹出一个对话框，但是。. 它居中于页面顶部，但不居中于页面中间的当前屏幕。每次我必须向上滚动并关闭对话框时。我需要的功能是我点击页面中的任何位置弹出的按钮应该出现在当前屏幕的中心。请帮帮我

#blanket {background-color:#111;opacity: 0.65;position:absolute;z-index: 9001; /*above nine thousand*/top:0px;left:0px;width:100%;}

#popUpDiv {
position:absolute;
background-color:#eeeeee;
 border:5px solid #68ad0e;
width:300px;
height:130px;
margin-top:-250px;
margin-left:-23px;
 -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}

html代码是

<div id="blanket""></div>
<div id="popUpDiv">
<a href="javascript:void(0)" style="text-decoration: none" onclick="popup('popUpDiv')"><div align="right"><font color="green">close[X]</font>&nbsp;&nbsp;&nbsp;</div></a>
<div align="center">Please Enter Your Area Pincode</div>
</div>


<input type="button" value="pincode" onclick="popup('popUpDiv')";>

有没有可以添加的.js函数来解决这个问题

4

2 回答 2

6

您需要将topand设置left为50%，然后将边距设置为相应边距的负半高/宽度。此外，如果您希望在滚动时使元素流动，则需要使用position: fixed;而不是使用position: absolute;

#popUpDiv {
position:fixed;
top: 50%;
left: 50%;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-left:-150px;
margin-top:-65px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}
于 2013-09-30T04:48:57.123 回答
0

只需添加margin-left:auto;和margin-right:auto;。#popupDiv

于 2013-09-30T04:55:22.450 回答