我遵循了这个tutorial
进行了一些更改,因为本教程具有两个功能按钮,但是我想使用一个按钮进行相同的操作。第一次单击效果很好,但是当我第二次单击时,深色背景仍然存在并且不会消失,这是代码和JSfiddle:
$(document).ready(function () {
var isOpen = false;
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
$('#help-content').toggle();
// 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.
$('#help').attr("class", "helpc");
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$('#help-content').css('display', 'none');
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').css({
opacity: 0
}).animate({
opacity: 0
}, function () {
$(this).hide();
});
$('#help').attr("class", "help");
}
// if window is resized then reposition the overlay box
$(window).bind('resize', showOverlayBox);
// activate when the link with class launchLink is clicked
$('.help').click(doOverlayOpen);
// close it when closeLink is clicked
$('.helpc').click(doOverlayClose);
});
http://jsfiddle.net/xoshbin/RuNa4/3/
最佳答案
由于绑定关闭事件时.helpc不存在,因此关闭事件不会附加,并且元素仍绑定到帮助类的功能,因为jQuery会缓存元素而不是类名。相反,您应该在创建容器元素的地方使用事件探询,并检查事件的起源:
$(".wrapper").on("click", ".help", doOverlayOpen);
$(".wrapper").on("click", ".helpc", doOverlayClose);
这是小提琴:http://jsfiddle.net/RuNa4/15/
关于javascript - 我第二次单击将其删除时,jQuery较暗的背景保持黑暗,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19813515/