Question

我正在使用以下代码在显示弹出窗口时淡出背景。这是div容器

相同的Css

#VbackgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}

当有人点击div时，我会显示一个弹出窗口，并使用

显示背景

function GreyoutBackground() {
    $("#VbackgroundPopup").css({
        "background-color": "#000000",
        "filter": "alpha (opacity=70)",
        "filter": "progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=70)",
        "-moz-opacity": "0.7",
        "opacity": "0.7",
        "-khtml-opacity": ".7",
        "zoom": "1"
    });
    $("#VbackgroundPopup").css({ "opacity": "0.6" });
    $("#VbackgroundPopup").show();
}

以上代码在Firefox中运行良好，但在Internet Explorer中它不起作用，有人可以告诉我是什么问题。我尝试宽度100％和身高100％，这也没有锻炼

Answer 1

这很好用（在IE6中测试过）：

<!DOCTYPE html>
<html>
<head>
    <title>Fade</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<button>Fade in the overlay</button>
<div id="overlay"></div>
<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#overlay {
    background-color: #000000;
    display:none;
    height:100%;
    top: 0;
    left: 0;
    position: fixed;
    _position: absolute;
    width: 100%;
    z-index: 999;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function($){
    $('button').click(function(){
        $('#overlay').fadeTo('slow', 0.5);
    });
});
</script>


</body>
</html>

我更喜欢使用fadeTo而不是css('opacity')，因为过渡是动画的。

IE中的背景淡出不占用

1 个答案: