位置彈出用戶正在查看的div

Question

我有一個彈出div工作點擊。 我需要在用戶正在查看的瀏覽器中顯示彈出窗口。 現在在短頁面上彈出div不在哪里可以找到，在長頁面上你必須向下滾動才能看到彈出窗口。

到目前為止，我在popUpDiv中嘗試了幾個不同的東西而沒有運氣。

margin: 30px auto 0;
    top: 50%;
    left: 50%;



 margin-left: -155px;
    margin-top: -700px;

這是我的css：

/*STYLES FOR CSS POPUP*/
#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv {
    padding: 40px;
    position:absolute;
    background-color: #f3f3f3;
    height:255px;
    border:5px solid #000;
    z-index: 9002;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
    margin-left: -155px;
    margin-top: -700px;
}
#popUpDiv a {position:relative; top:0px; right:10px}
/*END CSS POPUP*/

這是我在我的php文件中的內容：

<!--POPUP--> 
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script>

    <div id="blanket" style="display:none;">
    </div>
    <div id="popUpDiv" style="display:none;">


        Pop Up content Here


    </div>
<!-- / POPUP-->

Answer 1

有很多方法可以做你在jscript中嘗試做的事情，但凱迪拉克的方法可能是模態彈出窗口： http ： //www.script-tutorials.com/css3-modal-popups/ 。

Answer 2

位置：固定將解決您的問題。 你使用的位置：絕對是造成所有戲劇性的。

#popUpDiv {
    padding: 40px;
    position:fixed;
    background-color: #f3f3f3;
    height:255px;
    border:5px solid #000;
    z-index: 9002;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
}