代码之家 › 专栏 › 技术社区 › kobe

背景淡出不在IE中占满

jquery

kobe · 技术社区 · 15 年前

我使用以下代码在显示弹出窗口时淡出背景。这是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;
}

当某些用户单击某个分区时,我将使用

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%,但也没有锻炼

1 回复 | 直到 15 年前

wildpeaks 15 年前

这很好(也在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') 因为过渡是动画。