1

我有一个图片库。单击任何图像会打开一个带有单击图像的模式窗口。我想隐藏模态窗口。我知道如何通过放置一个关闭按钮来做到这一点。但我不想添加任何关闭按钮。我想要做的是，每当用户点击 div 以外gallery-image gallery-control-previous gallery-control-next的任何地方时，模态窗口都应该被隐藏。

谁能建议我如何实现这一目标。

这是我的jsFiddle

4

5 回答 5

3

Demo

单击时隐藏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')而不是隐藏来提供良好的效果

于 2013-07-29T16:06:02.083 回答
1

只需将以下内容添加到您的代码中：

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

$('.gallery-image').click(function() {
    return false;
});

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

更新了小提琴。

于 2013-07-29T15:58:08.990 回答
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 秒。

于 2013-07-29T16:17:05.007 回答
0

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

查看 JSFiddle 以获取示例

然后为您的.gallery-captionboxand.gallery-image添加一个click事件 and 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

于 2013-07-29T16:05:08.023 回答
-1

尝试，

   $(文档).click(函数(e) {

       如果（e.target.id！='yourDivId'）{
           $("#yourDivId").hide();
       }
   });
于 2013-07-29T16:01:28.573 回答