Question

让我先说一下，我是jquery的新手，并且是javascript的新手。

我搜索了一下，发现了一个我能够遵循的叠加教程，此时我甚至不记得我从哪里得到它。我有以下工作（几乎）：

function showOverlayBox() {
//if box is not set to open then don't do anything
if( isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
    display:'block',
    left:($(window).width() - $('.overlayBox').width()) / 2,
    top:($(window).height() - $('.overlayBox').height()) / 2 -20,
    position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
    display:'block',
    width: $(window).width(),
    height:$(window).height()
});
}

function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate({opacity:0.5, backgroundColor:'#000'});
// dont follow the link : so return false.
return false;
}

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate({opacity:0}, null, null, $(this).hide(););
}

<style type="text/css">
body { font:76% verdana; }
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:5px solid #09F;
position:absolute;
display:none;
width:500px;
height:300px;
background:#fff;
overflow: scroll;
}
.overlayContent {
padding:10px;
}
.closeLink {
float:right;
color:red;
}
a:hover { text-decoration:none; }

h2 {
padding:5px;
margin:0;
}
</style>

<div class="bgCover">&nbsp;</div>
<div class="overlayBox">
<div class="overlayContent">
    <a href="#" class="closeLink">Close</a>
</div>
</div>
<a href="#" class="launchLink">Launch Window</a>

<script type="text/javascript">
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox);
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>

这在我的独立页面中运行正常。但是，出于某种原因，当我把它放到页面中时我需要它，当我点击覆盖框上的关闭时，bgCover不会消失。这种情况发生在IE9中，但不发生在FF 3.6.10中。如果我注释掉这一行：

$('.bgCover').css({opacity:0}).animate({opacity:0.5, backgroundColor:'#000'});

在doOverlayOpen中，它按预期工作，当然除了.bgCover全黑并且不透明（我猜这是因为动画不会发生）。

如果我用doOverlayClose动画调用替换函数调用（当前只是用函数执行$（this）.hide（）;），我可以看到它永远不会被调用。例如：

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate({opacity:0}, null, null, testFunction);
}

function testFunction() {
    alert("GotHere!");
    $(this).hide();
}

警报永远不会触发。

在某些情况下，似乎某些原因IE9上的删除行永远不会发生，但我无法弄清楚原因。

显然，这两个页面之间的环境有所不同（它工作的地方和不工作的地方），但我找不到任何东西可以告诉我到底是什么。任何人都可以指出我应该寻找的正确方向吗？

Answer 1

如果您不使用CSS，会发生什么？

doOverlayOpen{
...
    $('.bgCover').animate({opacity:0.5, backgroundColor:'#000'});
}

doOverlayClose
...
    $('.bgCover').animate({opacity:0, backgroundColor:'transparent'});
}

覆盖解除后，jquery叠加背景调暗不会在IE9上消失

1 个答案: