Javascript混淆和模态框

Question

所以我制作了一个按钮，每当你点击它时，一个窗口就会出现，而当你点击除窗口之外的任何东西时，它就会消失。

我弹出了一个窗口，它确实改变了背景的不透明度，使其看起来不可见，但由于某种原因，每次我点击窗口底部时，它都会消失，每次我在窗口外点击时，它不会消失，而且不透明度永远不会变回原来的形式。

var modal = document.getElementById('modal-box');
$('.button-func').click(function(){
$('.filter-box').animate({height:"toggle", opacity:"toggle"}, "slow");
$('.header').animate({opacity:'.6'});
$('.topnav').animate({opacity:'.6'});
$('.add-filter').animate({opacity:'.6'});
$('.main_home_box').animate({opacity:'.6'});
});
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
$('.header').animate({opacity:'1'});
$('.topnav').animate({opacity:'1'});
$('.add-filter').animate({opacity:'1'});
$('.main_home_box').animate({opacity:'1'});
}
}

对js来说相当新，如果有点乱的话，很抱歉

Answer 1

我认为您的窗口中存在一些问题。请选择事件逻辑，如果文档代码上的target==modal不应该执行，如果target=模态意味着目标超出了你的范围。试试看。

var modal = document.getElementById('modal-box');
$('.button-func').click(function(){
$('.filter-box').animate({height:"toggle", opacity:"toggle"}, "slow");
$('.header').animate({opacity:'.6'});
$('.topnav').animate({opacity:'.6'});
$('.add-filter').animate({opacity:'.6'});
$('.main_home_box').animate({opacity:'.6'});
});
window.onclick = function(event) {
if (event.target != modal) {
modal.style.display = "none";
$('.header').animate({opacity:'1'});
$('.topnav').animate({opacity:'1'});
$('.add-filter').animate({opacity:'1'});
$('.main_home_box').animate({opacity:'1'});
}
}

Answer 2

正如piyush所建议的，window.click应该是这个函数。

function(event) {
if (event.target != modal) {
modal.style.display = "none";
$('.header').animate({opacity:'1'});
$('.topnav').animate({opacity:'1'});
$('.add-filter').animate({opacity:'1'});
$('.main_home_box').animate({opacity:'1'});
}
}

仍然存在的问题是，当您单击任何位置时，事件目标都不是您所期望的。例如，当您单击模式窗口内的文本框时，事件目标是文本框，而不是模式窗口。您必须更改逻辑，以识别用户是在模态窗口内部还是外部单击。event.target != modal不是一个准确的检查。您可以使用event.target.path属性来解决此问题。希望这能有所帮助。欢迎查询。