Question

。我在页面中间有一个按钮。。 .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函数来解决此问题

Answer 1

您需要将top和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*/}

Answer 2

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

单击按钮弹出div应该是屏幕的中心

2 个答案: