彈出窗口不會apperar在正確的位置

直播定點http://uposonghar.com/new-video/彈出窗口不會apperar在正確的位置

如果你去那個網站，然後懸停在嵌入的YouTube視頻，然後分享2鍵會出現，1爲Facebook & 1嘰嘰喳喳。點擊該按鈕，即時共享窗口後出現&5秒陸續彈出窗口中將出現像但─ enter image description here

但是，彈出窗口不會出現在正確的位置，我希望把它集中在垂直+水平。

我的CSS代碼 -

#reveal-modal-bg { 
position: fixed; 
height: 100%; 
width: 100%; 
background: #000; 
background: rgba(0,0,0,.8); 
z-index: 100; 
display: none; 
top: 0; 
left: 0; 
} 
.reveal-modal { 
visibility: hidden; 
top: 100px; 
left: 50%; 
margin-left: -300px; 
width: 520px; 
background: #eee; 
position: fixed; 
z-index: 101; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
-box-shadow: 0 0 10px rgba(0,0,0,.4); 
text-align:center; 
padding:20px 15px 30px; 
}

來源

2014-02-21 arifix

如何在您的網站上調用彈出窗口？ – berentrom

@arifix什麼是您的彈出窗口高度？ –

嘗試：

.reveal-modal { 
visibility: hidden; 
top: 50% !important; // there 
-webkit-transform: translateY(-50%); // and there 
transform: translateY(-50%); // and there 
left: 50%; 
margin-left: -300px; 
width: 520px; 
background: #eee; 
position: fixed; 
z-index: 101; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
-box-shadow: 0 0 10px rgba(0,0,0,.4); 
text-align:center; 
padding:20px 15px 30px; 
}

來源

2014-02-21 17:38:05 enguerranws

如果聲明的高度，你可以這樣做，以保持覆蓋div總是同時在垂直集中和水平方向：

.reveal-modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    height: 340px; /* must be declared */ 
}

查看demo on JSFiddle。

這是Stephen Shaw撰寫的一篇關於achieving absolute centering的文章。

來源

2014-02-21 17:39:13 edmundo

完美答案。 – Nix

我可以看到將你複製它的中心水平的方式最簡單的方法：

.reveal-modal { top: 50%; margin-top: -186px; }

這是假設框的高度通常是一致的

來源

2014-02-21 17:42:53 MickelsonMichael

你不需要絕對中心的元素。既不使用CSS3公式。只需使用display:table-cell和vertical-align: middle即可。

這裏是垂直和水平居中的div的概念：

<div class="modal-bg"> 
    <div class="modal"> 
     <div class="window">Test</div> 
    </div> 
</div>

和CSS：

.modal-bg 
{ 
    display:table; 
    width: 100%; 
    height: 100%; 
    position:fixed; 
    left: 0px; 
    top: 0px; 
} 

.modal 
{ 
    position: relative; 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
} 

.window 
{ 
    margin: 0 auto; 
    width:200px; 
    height: 200px; 
    background-color: red; 
}

試試吧...這將這樣的伎倆
http://jsfiddle.net/69skp/1/

來源

2014-02-21 17:43:13 LcSalazar

首先刪除top:300px內聯樣式，然後將高度定義爲height:50%和top:25%，它將成爲中心

來源

2014-02-21 17:43:27

彈出窗口不會apperar在正確的位置

回答

相關問題