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

Question

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

Answer 1

Demo

Hide on clicking other than navigation keys

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

Hide on clicking other than image and navigation keys

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

you can use fadeout('slow') instead of hide for giving good effects

Answer 2

Just add the following to your code:

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

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

You will also need to add return false at the end of your click handlers for .gallery-control-previous , .gallery-control-next and .gallery-image so that the event doesn't propagate to .gallery-overlay .

Updated fiddle .

Answer 3

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, ie2 seconds.

Answer 4

Simply add a click event to fadeOut() the .gallery-overlay onclick.

View the JSFiddle for an example

Then for your .gallery-captionbox and .gallery-image , add a click event and return false on them.

// 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

Try,

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

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