Hiding a modal window without using close button


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 <a href="http://jsfiddle.net/TSc8E/16/" rel="nofollow"> jsFiddle</a>


Here is the

<a href="http://jsfiddle.net/TSc8E/20" rel="nofollow">jsFiddle</a>..

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.


<kbd><a href="http://jsfiddle.net/cse_tushar/TSc8E/34/" rel="nofollow"><strong>Demo</strong></a></kbd>

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


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.

<a href="http://jsfiddle.net/TSc8E/28/" rel="nofollow">Updated fiddle</a>.


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

<a href="http://jsfiddle.net/TSc8E/30/" rel="nofollow"><strong>View the JSFiddle for an example</strong></a>

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

<a href="http://jsfiddle.net/TSc8E/30/" rel="nofollow"><strong>View the JSFiddle</strong></a>



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


  • Line with fill and stroke
  • Youtube Video Player Fullscreen click event
  • Change the width of the JQM panels
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • EntLib Way to Bind “Null” Value to Parameter
  • insert radio value multiple data codeigniter in database to one row?
  • cell spacing in div table
  • Universal Image Loader reuse images
  • Cannot get text from text area
  • Salesforce Different WSDL files and when to use
  • Redshift Querying: error xx000 disk full redshift
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Django model inheritance, filtering models
  • AndEngine Applying Transparancy to AndEngine View
  • presentShareDialogWithParams posts to FB wall, but callback handler results say error
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • Rails Find when some params will be blank
  • Time complexity of a program which involves multiple variables
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Custom Tabgroup Appcelerator
  • Checking free space on FTP server
  • How to clear text inside text field when radio button is select
  • Projection media query: browser support and workarounds?
  • Deselecting radio buttons while keeping the View Model in synch
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Is possible to count alias result on mysql
  • Updated Ionic CLI but shows previous version (Windows)
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • How to disable jQuery.jplayer autoplay?
  • Benchmarking RAM performance - UWP and C#
  • Acquiring multiple attributes from .xml file in c#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How can I remove ASP.NET Designer.cs files?
  • Busy indicator not showing up in wpf window [duplicate]
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal