如何使彈出窗口看看屏幕的中心？

當我點擊一個鏈接時，彈出窗口出來。問題是它沒有與屏幕中心對齊。順便說一下，我的代碼還可以幫助網站（和彈出窗口）在移動版本中完美顯示。如何使彈出窗口看看屏幕的中心？

的HTML代碼：

<a href="#" data-reveal-id="exampleModal">POP UP</a> 

<div id="exampleModal" class="reveal-modal"> 
    <h2>POP UP</h2> 
    <p> 
    <font size="4">window window window.window window window. window. 
     </font> 
    </p> 
    <a class="close-reveal-modal">×</a> 
</div>

CSS代碼：

.reveal-modal  
    { 
     background:#e1e1e1; 
     visibility:hidden; 
     display:none; 
     top:100px; 
     left:50%; 
     width:820px; 
     position:absolute; 
     z-index:41; 
     padding:30px; 
     -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4); 
     -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
     box-shadow:0 0 10px rgba(0,0,0,0.4) 
    }

我試圖把一些正確的：50％爲好，但沒有奏效。不應該離開工作？

來源

2013-10-19 Apolo Radomer

要麼使用jQuery calc下/設置左，或者把p在全寬的容器中進行操作，並且使用text-align：center。 –

js小提琴會幫助 – 2013-10-19 15:39:51

這些都是變化，使：

CSS：

#container { 
    width: 100%; 
    height: 100%; 
    top: 0; 
    position: absolute; 
    visibility: hidden; 
    display: none; 
    background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */ 
} 
#container:target { 
    visibility: visible; 
    display: block; 
} 
.reveal-modal { 
    position: relative; 
    margin: 0 auto; 
    top: 25%; 
} 
    /* Remove the left: 50% */

HTML：

<a href="#container">Reveal</a> 
<div id="container"> 
    <div id="exampleModal" class="reveal-modal"> 
    ........ 
    <a href="#">Close Modal</a> 
    </div> 
</div>

JSFiddle - Updated with CSS only

來源

2013-10-19 15:54:01 Deryck

我不想添加jss，因爲我將不得不改變一些東西。是不是隻有css纔有可能？ –

是的，我只是懶惰哈哈我會修復它真正快速holdhold – Deryck

@ApoloRadomer那裏你去。更新了你的jfiddle，以便你可以看到它在行動中。 – Deryck

如何使彈出窗口看看屏幕的中心？

回答

相關問題