jquery模式使其在我单击其他位置时关闭

Question

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

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

Answer 1

创建一个检查youtubemodal的函数，该函数显示然后隐藏。

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

Answer 2

下面是你需要做的：

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

下面是它的行为方式：

• 当您单击图像时，该模式将出现
• 当该模式出现时，我们将一个侦听器添加到document，以便当您在任意位置单击时，该模式将被隐藏(并且该侦听器也将被删除)
• 当该模式出现时，我们还会向其添加一个侦听器，以便如果您单击该模式但未将其隐藏:只有当您在其外部单击时该模式才会隐藏

注意:如果您使用的不是jQuery 1.7或更高版本，请用.bind()替换.on()，用.unbind()替换.off()

Answer 3

我想出了我自己的解决办法，我设置了一个带有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>

然后我应用了这段代码，以确保当我单击新的黑色“背景”时，div和模式关闭。

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();
});