Jquery IE中背景淡出未完全占据_Jquery

Jquery IE中背景淡出未完全占据

jquery

Jquery IE中背景淡出未完全占据,jquery,Jquery,我使用以下代码在显示弹出窗口时淡出背景。这是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

我使用以下代码在显示弹出窗口时淡出背景。这是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中运行良好，但在InternetExplorer中不起作用，有人能告诉我是什么问题吗。我尝试了100%宽度和100%高度，但也没有锻炼

这很好（也在IE6中测试）：


褪色
淡入覆盖层
* {
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
#覆盖层{
背景色：#000000；
显示：无；
身高：100%；
排名：0；
左：0；
位置：固定；
_位置：绝对位置；
宽度：100%；
z指数：999；
}
jQuery（文档）.ready（函数（$）{
$（“按钮”）。单击（函数（）{
$（'叠加'）.fadeTo（'慢'，0.5）；
});
});

我更喜欢使用

fadeTo

而不是

css（'opacity'）

，因为转换是动画的。

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


褪色
淡入覆盖层
* {
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
#覆盖层{
背景色：#000000；
显示：无；
身高：100%；
排名：0；
左：0；
位置：固定；
_位置：绝对位置；
宽度：100%；
z指数：999；
}
jQuery（文档）.ready（函数（$）{
$（“按钮”）。单击（函数（）{
$（'叠加'）.fadeTo（'慢'，0.5）；
});
});

我更喜欢使用

fadeTo

而不是

css（'opacity'）

，因为过渡是动态的。

你不是在说问题出在哪里吗？灰色背景不会进入ie，如果它必须工作，我必须给出1000px的宽度；高度为3000%，但宽度和高度对于页面来说是动态的，因为高度取决于页面中的项目数量。任何帮助都会得到响应，因为这有点紧急。你不是说问题出在哪里吗？灰色背景不会出现，如果它必须工作，我必须给出1000px的宽度；和高度为3000%，但宽度和高度对于页面是动态的，因为高度取决于页面中的项目数量。任何帮助都将得到真正的通知，因为这是一种紧急情况。

<!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>