通过单击背景区域来关闭灯箱窗口？

Question

I have developed a lightbox feature which I am trying to figure out how to close the lightbox preview window by clicking on the background area behind the image displayed, (while keeping the image unaffected).

Here's a demo snippet. There's a button toggle control at the upper, right-hand corner to close the lightbox window, but I would like to be able to close the window by clicking on the background area surrounding the image as well. Any input?

UPDATE: The Solution

Finally got this working, thanks to Marouen Mhiri . Updated my original snippet here:

 var $scrollTop = 0; $('.pic > img').click(function() { var $body = $('body'); $scrollTop = $(window).scrollTop(); $body.css('position', 'fixed'); $body.css('top', '-' + $scrollTop + 'px'); $body.css('background-position', '0 -' + $scrollTop + 'px'); var srcToCopy = $(this).attr('src'); $body.find('.imgsrc').attr('src', srcToCopy); $body.addClass('no-scroll'); $('#view').addClass("target"); }); $('#customlightbox-controls').on('click', function() { var $body = $('body'); $body.css('position', ''); $body.css('background-position', ''); $scrollTop = $(window).scrollTop($scrollTop); $body.removeClass('no-scroll'); $('#view').removeClass("target"); }); $('.customlightbox-imgwrap').on('click', function(e) { if(!$(e.target).hasClass('imgsrc')){ var $body = $('body'); $body.css('position', ''); $body.css('background-position', ''); $scrollTop = $(window).scrollTop($scrollTop); $body.removeClass('no-scroll'); $('#view').removeClass("target"); } }); 

 body { background-color: #58d68d; margin: 0; padding: 0; border: 0; height: 100%; width: 100%; } body.no-scroll { overflow: hidden; height: auto; width: 100%; } .pic, #imgsrc { display: inline-block; cursor: pointer; } img { width: 150px } a { display: inline-block; line-height: 0; } .container { text-align: center; display: block; width: 100%; line-height: 0; } .customlightbox { top: 0%; bottom: 0%; box-sizing: border-box; position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: -5; opacity: 0; } .customlightbox-imgwrap { width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; text-align: center; } .customlightbox img { width: auto; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; position: relative; top: 50%; transform: translateY(-50%); } #customlightbox-controls { cursor: pointer; box-sizing: border-box; position: fixed; height: 50px; width: 50px; top: -50px; right: -3px; z-index: 5; border-left: 2px solid white; border-bottom: 2px solid white; opacity: .7; } #close-customlightbox { display: block; position: absolute; overflow: hidden; height: 30px; width: 30px; right: 10px; top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-customlightbox:before { content: ""; display: block; position: absolute; height: 0px; width: 2px; left: 14px; top: 0; background: white; border-radius: 2px; } #close-customlightbox:after { content: ""; display: block; position: absolute; width: 0px; height: 2px; top: 14px; left: 0; background: white; border-radius: 2px; } .customlightbox.target { z-index: 4; opacity: 1; display: inline-block; } .customlightbox.target img { opacity: 1; } .customlightbox.target~#customlightbox-controls { top: -3px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:after { width: 30px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:before { height: 30px; } .lb-animate { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Lightbox Instance 1 --> <div class="container"> <div class="pic"> <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png"> </div> </div> <!-- Lightbox Instance 2 --> <div class="container"> <div class="pic"> <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png"> </div> </div> <!-- Lightbox Instance 3 --> <div class="container"> <div class="pic"> <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png"> </div> </div> <!-- Lightbox Instance 4 --> <div class="container"> <div class="pic"> <img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png"> </div> </div> <!-- Lightbox Instance 5 --> <div class="container"> <div class="pic"> <img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png"> </div> </div> <!-- Lightbox Controls --> <div class="customlightbox lb-animate" id="view"> <div class="customlightbox-imgwrap"> <img class="imgsrc" id="customlightbox-img" src=""> </div> </div> <div id="customlightbox-controls" class="lb-animate"> <a id="close-customlightbox" class="lb-animate"></a> </div> 

This question stems from a previous question, answered here .

Answer 1

just use the click event of the div containing the lightbox and fire the event only if the clicked area doesn't contain the image:

$('.customlightbox-imgwrap').on('click', function(e) {
   if(!$(e.target).hasClass('imgsrc')){ // check if target is not the image displayed
     var $body = $('body');
     $body.css('position', '');
     $body.css('background-position', '');
     $scrollTop = $(window).scrollTop($scrollTop);
     $body.removeClass('no-scroll');
     $('#view').removeClass("target");
   } 
});

Answer 2

Hiding the lightbox by clicking on the background

It is possible by adding #view to the following code.

Before

$('#customlightbox-controls').on('click', function()

After

$('#customlightbox-controls, #view').on('click', function()

 var $scrollTop = 0; $('.pic > img').click(function() { var $body = $('body'); $scrollTop = $(window).scrollTop(); $body.css('position', 'fixed'); $body.css('top', '-' + $scrollTop + 'px'); $body.css('background-position', '0 -' + $scrollTop + 'px'); var srcToCopy = $(this).attr('src'); $body.find('.imgsrc').attr('src', srcToCopy); $body.addClass('no-scroll'); $('#view').addClass("target"); }); $('#customlightbox-controls, #view').on('click', function() { var $body = $('body'); $body.css('position', ''); $body.css('background-position', ''); $scrollTop = $(window).scrollTop($scrollTop); $body.removeClass('no-scroll'); $('#view').removeClass("target"); }); 

 body { background-color: #58d68d; margin: 0; padding: 0; border: 0; height: 100%; width: 100%; } body.no-scroll { overflow: hidden; height: auto; width: 100%; } .pic, #imgsrc { display: inline-block; cursor: pointer; } img { width: 150px } a { display: inline-block; line-height: 0; } .container { text-align: center; display: block; width: 100%; line-height: 0; } .customlightbox { top: 0%; bottom: 0%; box-sizing: border-box; position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: -5; opacity: 0; } .customlightbox-imgwrap { width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; text-align: center; } .customlightbox img { width: auto; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; position: relative; top: 50%; transform: translateY(-50%); } #customlightbox-controls { cursor: pointer; box-sizing: border-box; position: fixed; height: 50px; width: 50px; top: -50px; right: -3px; z-index: 5; border-left: 2px solid white; border-bottom: 2px solid white; opacity: .7; } #close-customlightbox { display: block; position: absolute; overflow: hidden; height: 30px; width: 30px; right: 10px; top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-customlightbox:before { content: ""; display: block; position: absolute; height: 0px; width: 2px; left: 14px; top: 0; background: white; border-radius: 2px; } #close-customlightbox:after { content: ""; display: block; position: absolute; width: 0px; height: 2px; top: 14px; left: 0; background: white; border-radius: 2px; } .customlightbox.target { z-index: 4; opacity: 1; display: inline-block; } .customlightbox.target img { opacity: 1; } .customlightbox.target~#customlightbox-controls { top: -3px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:after { width: 30px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:before { height: 30px; } .lb-animate { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Lightbox Instance 1 --> <div class="container"> <div class="pic"> <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png"> </div> </div> <!-- Lightbox Instance 2 --> <div class="container"> <div class="pic"> <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png"> </div> </div> <!-- Lightbox Instance 3 --> <div class="container"> <div class="pic"> <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png"> </div> </div> <!-- Lightbox Instance 4 --> <div class="container"> <div class="pic"> <img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png"> </div> </div> <!-- Lightbox Instance 5 --> <div class="container"> <div class="pic"> <img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png"> </div> </div> <!-- Lightbox Controls --> <div class="customlightbox lb-animate" id="view"> <div class="customlightbox-imgwrap"> <img class="imgsrc" id="customlightbox-img" src=""> </div> </div> <div id="customlightbox-controls" class="lb-animate"> <a id="close-customlightbox" class="lb-animate"></a> </div>