點擊按鈕彈出div應居中屏幕

。。我在頁面中間有一個按鈕。。 .on點擊彈出對話框出現，但。。它是居中到頁面的頂部，但不居中的當前屏幕在頁面的中間..每次我必須向上滾動並關閉對話框。我需要的功能是在頁面中的任何地方我點擊按鈕彈出應該出現中心目前screen.Please幫我出球員點擊按鈕彈出div應居中屏幕

#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文件功能問題

來源

2013-09-30 Zain

您需要設置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*/}

來源

2013-09-30 04:48:57

這是完美的，但要確保你使用'fixed'而不是'absolute'，我想這就是OP所需要的 –

是的我誤解了他說他在頁面中滾動的部分。感謝和編輯。 –

謝謝Mr.Alien和Thomas木 – Zain

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

來源

2013-09-30 04:55:22

您的權利Girish但。。但我處於頁面中間，但彈出窗口顯示在頁面的頂部。。。 – Zain

點擊按鈕彈出div應居中屏幕

回答

相關問題