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;
}

位置弹出用户正在查看的div

2 个答案: