当我在弹出框外面点击时,我想关闭它。
HTML
<span class="open"data-modal="modal1">Button</span>
<div class="modal" id="modal1">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content-->
</div>
</div>
JS
$(document).ready( function() {
//open pop-up when span is clicked
$(".open").on("click", function() {
var modalId = $(this).data("modal");
var $modal = $("#" + modalId);
$modal.show();
});
//close pop-up when close button is clicked
$(".close").on("click", function() {
$(this).closest(".modal").hide();
});
$("body").click(function(){
$(".modal").hide();
});
// Prevent events from getting pass .popup
$(".modal-content").click(function(e){
e.stopPropagation();
});
});
在代码块底部,我有一个点击函数来隐藏模态框,但如果点击了“modal-content”,那么就会触发“e.stopPropagation();”。
然而,当我点击打开弹出窗口的按钮时,它不会打开,因为$("body").click(function(){}。
是否有一种方式可以像这样包装$("body").click(function(){}):
if($('.modal').show == true{ ... });
$(".modal-content").click(function(e){ e.stopPropagation(); });
成为多余的了? - rpivovar