在單擊按鈕上彈出div應該位於屏幕中心

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 。