0

ページの起動時にページ カバー全体を起動する JavaScript と、カバーの上に開く 2 つの div「dialog」と「dialog2」があります。つまり、通知で背景が黒く塗りつぶされているようなものです。

私が得ている問題は、「カバー」の背景を透明にしたい/不透明にしたいということですが、何らかの理由でこれにより「ダイアログ」と「ダイアログ2」のdivの背景が透明になり、私はこれが起こってほしくないのですが、なぜこれが起こっているのかわからないのですか？

誰かが私が間違っていることを教えてください。

<script type="text/javascript">
    window.onload = function showPopUp(el) {
    var cvr = document.getElementById("cover")
    var dlg = document.getElementById("dialog")
    cvr.style.display = "block"
    dlg.style.display = "block"
    if (document.body.style.overflow = "hidden") {
        cvr.style.width = "1024"
        cvr.style.height = "100&#37;"
        }
    }

    </script>
    <style type="text/css">

    #cover {
    display:none;
    position:absolute;
    z-index:98;
    left:0px;
    top:0px;
    width:100%;
    height:2648px;
    background-color:#fff;
    filter:alpha(Opacity=50);
    opacity:0.7;
    -moz-opacity:0.7;
    -khtml-opacity:0.7;
    overflow:hidden;
    }

    #dialog {
     background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
        background-repeat: no-repeat;
        background-size:311px 187px;
        height:187px;
        width:311px;
        margin-top:300px;
        margin-left:650px;
    z-index: 99; 
    position:fixed;


    }

    #dialog2 {
     background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
        background-repeat: no-repeat;
        background-size:311px 187px;
        height:187px;
        width:311px;
        margin-top:300px;
        margin-left:230px;
    z-index: 99; 
    position:fixed;


    }

    </style>

    </head>
    <div id="cover">
    <div id="dialog">
    </div>
    <div id="dialog2">
    </div>
    <div class="foo"></div>
    </div>


                    <script type="text/javascript">
                $(document).ready(function(){
                    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
                    //Vertical Sliding

                    //Caption Sliding (Partially Hidden to Visible)
                    $('.boxgrid.caption').hover(function(){
                        $(".cover", this).stop().animate({top:'-38px'},{queue:false,duration:200});
                    }, function() {
                        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200});
                    });
                });
                    </script>
4

3 に答える 3

2

CSS の不透明度は、その中のすべてとすべてのタグに影響します。ダイアログからカバーを分離する必要があります。このような：

    <div id="cover"></div>

    <div id="dialog">
    </div>
    <div id="dialog2">
    </div>
    <div class="foo"></div>
于 2012-12-29T09:33:08.637 に答える
1

を使用する代わりに、色形式opacityを使用できます。rgba

#cover {
    ....
    background: rgba(255, 255, 255, 0.7);
    ....
}

これで、HTML をいじらずに問題が解決するはずです。

于 2012-12-29T13:25:35.033 に答える
0

置く

<div id="dialog">
</div>
<div id="dialog2">
</div>

の外

<div id="cover">

または、css #dialog1 と #dialog2 を挿入します。

filter:alpha(Opacity=100);
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;

それが役に立てば幸い ：）

于 2012-12-29T09:34:04.613 に答える