jsFiddle ..

Question

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

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

这是我的 jsFiddle

Answer 1

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')代替隐藏以获得良好效果

Answer 2

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

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

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

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

Updated fiddle

Answer 3

这是

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 4

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

View the JSFiddle for an example

然后，对于您的.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

View the JSFiddle

Answer 5

尝试，

   $(document).click(function(e) {

       if( e.target.id != 'yourDivId') {
           $("#yourDivId").hide();
       }
   });

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

5 个答案:

jsFiddle ..