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

Hiding a modal window without using close button

本文关键字：模式 窗口 隐藏 关闭按钮      更新时间：2023-09-26

我有一个图片库。单击任何图像都会打开一个带有已单击图像的模态窗口。我想隐藏模式窗口。我知道怎么按关闭按钮。但我不想添加任何关闭按钮。我想做的是，每当用户单击div gallery-image gallery-control-previous gallery-control-next之后的任何位置时，模式窗口都应该被隐藏。

有人能建议我如何做到这一点吗。

这是我的jsFiddle

演示

单击除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')而不是隐藏来获得良好的效果

这是

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秒。

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

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

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

更新的小提琴。

只需向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

Try，

$（文档）.点击（函数（e）{if（e.target.id！='yourDivId'）{$（"#yourDivId"）.hide（）；}})；
相关文章：