0

我有一段 javascript 在启动页面时启动整个页面封面，以及在封面顶部打开的两个 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 回答