Javascript 如何在单击“外部”时关闭模态_Javascript_Jquery

Javascript 如何在单击“外部”时关闭模态

javascript jquery

Javascript 如何在单击“外部”时关闭模态,javascript,jquery,Javascript,Jquery,我在下面使用了此JavaScript： $（'body'）。单击（函数（）{ if（！$（this.target）.is（'#popUpForm'））{ $（“.modalDialog”）.hide（）； } }); 索取一本带有免费演示的小册子请填写以下表格：使用父节点#openModal（容器）而不是#popUpForm（表单）：这不是最有效的方法，但它会起作用。这样做的目的是遍历树，并检查父项是否是您不希望在单击除它之外的任何位置时隐藏的id $(document).on('cl

我在下面使用了此JavaScript：

$（'body'）。单击（函数（）{
if（！$（this.target）.is（'#popUpForm'））{
$（“.modalDialog”）.hide（）；
}
});

索取一本带有免费演示的小册子
请填写以下表格：
使用父节点#openModal
（容器）而不是#popUpForm
（表单）：
这不是最有效的方法，但它会起作用。这样做的目的是遍历树，并检查父项是否是您不希望在单击除它之外的任何位置时隐藏的id
$(document).on('click', function(e) {    
    var p = e.target;
    while(p) {
        console.log(p);
        if(p.id) {
            if(p.id == 'openModal') {
                return;
            }
        }
        p = p.parentElement;
    }
    $("#openModal").hide();
});


$（'body'）。在（'click'，'modal open'，函数（e）{
$（'.modal背景，.modal'）.show（）；
e、 预防默认值（）；
})
.on（'click'，'modal close'，函数（e）{
$（'.model背景，.model'）.hide（）；
e、 预防默认值（）；
});
if（！$（'.modal background.modal close'）.length）{
$（''）.addClass（'modal-background-modal-close'）.appendTo（'body'）；
}
正文{
背景：#ccc；
溢出y：滚动；
填充：15px；
}
钮扣{
光标：指针；
}
.莫代尔{
宽度：400px；
利润率：5%自动0-200px；
填充：10px；
背景：#eee；
显示：无；
位置：绝对位置；
左：50%；
排名：0；
z指数：10；
}
.模态背景{
背景：rgba（0,0,0,0.5）；
/*背景：透明*/
/*位置：绝对位置*/
位置：固定；
z指数：9；/*.modal[zIndex]-1*/
底部：0；
右：0；
左：0；
排名：0；
显示：无；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

开放模态

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）。


为测试切换某物


许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）。


闭合模态

这似乎是我最终能找到的代码：
$(document).click(function (e) {
    if ($(e.target).is('#openModal')) {
        $('#openModal').fadeOut(500);
    }

});

$("#modalNo").click(function () {
    $("#openModal").fadeOut(500);


});
$(".close").click(function () {
    $("#openModal").fadeOut(500);
});
$(".close-circle").click(function () {
    $("#openModal").fadeOut(500);
});

这对我有用：
我在模式窗口内有一个图像，因此如果有人在图像外单击（居中）：
html代码：
<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>

$( document ).ready(function() {

    $("#element_that_opens_modal").click(function(){
        $("#modal_div").show();
    });

    window.onclick = function(event) {
       if (event.target.id != "image_in_modal_div") {
          $("#modal_div").hide();
       }
    }

});

混合jquery和javascript代码：
<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>

$( document ).ready(function() {

    $("#element_that_opens_modal").click(function(){
        $("#modal_div").show();
    });

    window.onclick = function(event) {
       if (event.target.id != "image_in_modal_div") {
          $("#modal_div").hide();
       }
    }

});

为将来的读者补充这一点
另一种在单击外部时取消模式的方法是利用javascript事件的冒泡特性
在典型的模态HTML结构中
<body>
  <div id="root">
    -- Site content here
  </div>
  <div id="modal-root">
    <div class="modal"></div>
  </div>
</body>


--此处的网站内容

单击.modal
将导致单击事件像这样传播.modal->#modal root->body
，而在模态外部单击将只经过#modal root->body

由于我们可以完全停止单击事件的传播，并且如果这不会干扰任何其他代码，我们只需要在.modal
和#modal root
中侦听单击事件。“模态根”单击将关闭模态，“模态”单击将停止传播单击事件，因此永远不会到达“模态根”
为了更加清晰，下面是在codepen.io中工作的代码：
简单：
var images_modal = document.getElementById('images-model-div');

var videos_modal = document.getElementById('video-model-div');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

   if (event.target == images_modal) {

      images_modal.style.display = "none";

    }

    if (event.target == videos_modal) {

      videos_modal.style.display = "none";

    }

}

您必须检查父节点。如果元素#openModal
的子节点的长度正好为一，则此操作有效。实际上，这比仅仅检查e.target
要复杂一点。感谢@self的干预，您可以使用closest（）
来覆盖子/父部分。。。（更新我的答案）。我发现我使用的模式插件是由一个土豆开发的，它使用e.stopPropagation（）
来实现相同的目标，这不可避免地防止了模式内部的任何事件被触发！我使用了你的解决方案来修复土豆编码。这是一种很好的方法，尽管如果你在模型中有一些可点击的元素（发送按钮、链接到条款和条件等），事情会变得复杂。@Kout它仍然有效，因为如果你将监听器放在元素本身上，内部元素的点击不会受到影响。