隐藏模态窗口而不使用关闭按钮

我有一个图库。 单击任何图像将打开一个带有单击图像的模态窗口。 我想隐藏模态窗口。 我知道如何通过关闭按钮来做到这一点。 但我不想添加任何关闭按钮。 我想要做的是每当用户点击其他任何地方然后跟随div gallery-image gallery-control-previous gallery-control-next模态窗口应该被隐藏。

任何人都可以建议我如何实现这一目标。

这是我的jsFiddle

Answer 1

这里是

jsFiddle ..

将此添加到jquery代码的末尾。

 $(".gallery-overlay").click(function(e) { if($(e.target).hasClass("gallery-image") || $(e.target).hasClass("gallery-control-next") || $(e.target) .hasClass("gallery-control-previous")){/**/} else {$(".gallery-overlay").fadeOut("2000"); } }); 

e.target在.gallery-overlay给出实际点击的区域。 $(this)不起作用。 您可以通过增加时间来减慢模态窗口的衰落速度。 这是2000，即2秒。

Answer 2

演示

在navigation keys以外的其他位置隐藏

 $('.gallery-overlay').click(function(event){ if($(event.target).hasClass('gallery-control') ==false){ $(this).hide(); } }); 

在image和navigation keys以外的其他位置隐藏

 $('.gallery-overlay').click(function(event){ if($(event.target).hasClass('gallery-control') ==false && $(event.target).hasClass('gallery-image') == false){ $(this).hide(); } }); 

你可以使用fadeout('slow')代替hide来获得好的效果

Answer 3

只需在代码中添加以下内容：

 $('.gallery-overlay').click(function() { $(this).fadeOut('slow'); }); $('.gallery-image').click(function() { return false; }); 

您还需要在click处理程序的末尾为.gallery-control-previous ， .gallery-control-next和.gallery-image添加return false ，以便事件不会传播到.gallery-overlay 。

更新小提琴 。

Answer 4

只需将点击事件添加到fadeOut() . .gallery-overlay onclick即可。

查看JSFiddle以获取示例

然后，对于.gallery-captionbox和.gallery-image ，添加一个click事件并在其上return false 。

 // Hide the gallery on click $('.gallery-overlay').click(function(){ $(this).fadeOut(); }); // Return false on click of the caption box or the image itself $('.gallery-captionbox, .gallery-image').click(function(){ return false; }); // All your other code below 

查看JSFiddle

Answer 5

尝试，

    $（document）.click（function（e）{

        if（e.target.id！='yourDivId'）{
            $（ “＃yourDivId”）隐藏（）。
        }
    }）;