隐藏模态窗口而不使用关闭按钮 [英] Hiding a modal window without using close button

问题描述

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

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

解决方案

这是

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

I have an image gallery. clicking on any image opens a modal window with the clicked in image. I want to hide the modal window. i know how to do it by putting a close button. But i don't want to add any close button. what i am trying to do is whenever a user click anywhere other then following div gallery-image gallery-control-previous gallery-control-next the modal window should get hidden.

can anyone suggest me how to achieve this.

Here is my jsFiddle

解决方案

Here is the

jsFiddle..

add this to end of your jquery code.

$(".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 gives the actual clicked area, within .gallery-overlay. $(this) doesn't work. You can slow down the rate of fading of modal window by increasing time. Here it is 2000, i.e.2 seconds.

这篇关于隐藏模态窗口而不使用关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！