Javascript 以较低层为目标关闭模式框
我有一个简单的模式框,如下所示:Javascript 以较低层为目标关闭模式框,javascript,jquery,Javascript,Jquery,我有一个简单的模式框,如下所示: <div id="social" class="overlay"> <div class="inner"> <a class="close" href="#"><span class="icon-close"></span></a> CONTENT </div> </div> 以下是JS: $(document).ready(functi
<div id="social" class="overlay">
<div class="inner">
<a class="close" href="#"><span class="icon-close"></span></a>
CONTENT
</div>
</div>
以下是JS:
$(document).ready(function(){
$("#social").css("height", $(document).height());
$(".social").click(function(){
$("#social").fadeIn();
return false;
});
$(".close").click(function(){
$("#social").fadeOut();
return false;
});
});
当有人单击带有类close
的链接时,模式框关闭。我希望当有人单击模式框之外的任何位置时,模式框也会关闭,因此在覆盖层上的任何位置(z-index:999
)。我不知道如何在不影响顶层(z-index:1000
)的情况下针对底层(z-index:999
)
我对jQuery了解不多,所以如果你能用新手的方式表达你的建议,那就太好了。谢谢!:) 通过在覆盖上附加单击事件处理程序,可以在单击覆盖时淡出模式框 HTML jQuery
$(document).ready(function () {
$("#social").css("height", $(document).height());
$(".social").click(function () {
$("#social").fadeIn();
return false;
});
$(".close").click(function () {
$("#social").fadeOut();
return false;
});
//This is the part that handles the overlay click
$("#social").on('click', function (e) {
if (e.target == this) {
$(this).fadeOut();
}
});
});
谢谢但是当我点击内容(实际的模态框)时,这也会关闭模态框。我只希望在模式框外部(即背景上)单击时关闭它。还有一个问题:如果我也想通过按ESC键隐藏模式框,有没有简单的方法?请参阅。将keyup事件绑定到覆盖,应该可以工作。
<input type="button" class="social" value="test" />
<div id="social" class="overlay">
<div class="inner">
<a class="close" href="#">
<span class="icon-close">X</span>
</a>
CONTENT
</div>
</div>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
}
#social .inner {
margin: 0 auto;
z-index: 1000;
width: 380px;
}
$(document).ready(function () {
$("#social").css("height", $(document).height());
$(".social").click(function () {
$("#social").fadeIn();
return false;
});
$(".close").click(function () {
$("#social").fadeOut();
return false;
});
//This is the part that handles the overlay click
$("#social").on('click', function (e) {
if (e.target == this) {
$(this).fadeOut();
}
});
});