0

クリックで動作するポップアップ 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-->
4

2 に答える 2

1

位置: 修正すると問題が解決します。あなたの position: absolute の使用は、すべてのドラマを引き起こしています。

#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;
}
于 2013-02-06T23:38:39.577 に答える
1

jscript でやろうとしていることを行う方法はいくつかありますが、それを行うキャデラックの方法は、モーダル ポップアップである可能性があります: http://www.script-tutorials.com/css3-modal-popups/。

于 2013-02-06T23:00:55.557 に答える