Javascript jquery模式在单击其他位置时将其关闭

目前，我只学习javascript，在这里需要一些帮助，因为我有点困惑，不知从哪里开始。 我有一个使用jquery的带有模式的网站，我可以在点击图片时让它显示出来，但当我点击其他地方时它不会关闭。 我试过切换，但无论我在哪里点击，它都会打开和关闭。 我尝试过隐藏，但它完全停止了工作（假设它在我点击链接时也应用了隐藏功能） 这是我到目前为止所拥有的，任何帮助都将是巨大的

jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});

---

制作一个函数，检查显示的YouTubeMold，然后隐藏

$("document").click(function() {
    if( $('#youtubemodal').is(':visible') ) {
        $('#youtubemodal').hide();
    } 
});

---

以下是您需要做的：

$('#youtube').click(function(){
    $('#youtubemodal')
        .show()
        .on("click", function(e){
            e.stopPropagation();
        });
    $(document).on("click.youtubemodal", function(){
        $(this).off(".youtubemodal");
        $('#youtubemodal').hide();
    });
});​

这就是它的行为方式：

• 单击图像时，将显示模式
• 当模态出现时，我们将一个侦听器添加到

  文档中

  ，这样当您单击任意位置时，模态被隐藏（并且侦听器也被删除）
• 当模态出现时，我们还向它添加了一个侦听器，因此如果单击模态if，它不会隐藏：只有在模态之外单击时，它才会隐藏

---

注意：如果您没有使用jQuery 1.7或更高版本，请将

.on（）

替换为

.bind（）

，将

.off（）

替换为

.unbind（）

我提出了自己的解决方法，其中我设置了一个暗背景的div，不透明度为40%，当加载模式时，该div将显示在整个页面中

#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;

}

然后我把这个div放在所有内容之外，以确保它覆盖整个页面

<div id="modalbackground"> </div>

---

谢谢TWCrap，但这似乎不起作用，它似乎没有意识到它是可见的，因此当我单击其他位置时，没有发生任何事情，并在文档中放置警报。单击函数（而不是if），以便您可以看到函数被触发。如果是这样的话，在if语句中也这样做……谢谢你，但不幸的是，这也没有起作用：（那么请发布你所有的代码（至少是

#youtube

和

#youtubeemodal

）嗨，Pioul，我已经在上面发布了一个解决方案，但是感谢您的帮助和解释！没问题。您可能希望将此解决方案作为答案发布并接受它（使用一些代码快速显示您对有相同问题的人所做的事），而不是发表评论。我找到了一个解决方案，我认为它看起来更好。我创建了一个带有黑色背景的div，当我单击youtube图像时会加载。然后，当我单击其他位置时，我被迫单击此背景，我有一个隐藏函数应用于该背景和单击它时的模式。

jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();

});

jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();

});

jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});

jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});