0

目前我只学习 javascript 并且可以在这里得到一些帮助，因为我对从这里去哪里有点困惑。我有一个使用 jquery 的模态站点，我可以在单击图像时显示它，但是当我单击其他地方时它不会将其关闭。我试过切换，但无论我点击哪里，它都会打开和关闭。我试过隐藏，但它完全停止工作（假设它应用隐藏功能，即使我点击链接）这是我到目前为止所拥有的，任何帮助都会很棒......

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

3 回答 3

0

为此我想出了自己的解决方法，我设置了一个深色背景的 div，不透明度为 40%，当加载模式时，它会出现在整个页面中。

#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();
});
于 2012-09-17T10:09:43.080 回答
0

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

$("document").click(function() {
    if( $('#youtubemodal').is(':visible') ) {
        $('#youtubemodal').hide();
    } 
});
于 2012-09-17T08:20:41.243 回答
0

这是您需要做的：

$('#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()

于 2012-09-17T08:27:00.750 回答