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或更高版本，请将.on()替换为.bind()，将.off()替换为.unbind()

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

当我点击其他地方时，jquery模态让它关闭

3 个答案: