jquery click triggered by underlaying div

Question

I'm making a lightbox of my own.

I have a semi transparent div that is fixed over the whole screen and inside it I have the lightbox centered with my content. A div in a div.

I'm not that great with jQ so I don't know how to make sure that the click event (to close container with dimmed div and lightbox) ONLY is triggered when clicking the dimmed area and not if I click something in the lightbox.

In essence: to close down the popup and semi transparent area if clicking on the semi transparent area, BUT NOT IF I CLICK IN THE MIDDLE LIGHTBOX.

This is what I got so far: ( with lightbox centered like in https://stackoverflow.com/a/8620628/891052 )

$(document).ready( function() {
  $("#openpopup").click(function() {
 $('#closepopup').toggle();
  });
  $("#closepopup").click(function() {
 $('#closepopup').toggle();
  });
});

html, body {height:100%;}
#closepopup {
 background:rgba(0,0,0,.5);
 position:fixed;
 top:0;
 left:0;
 
 THIS_CENTERS_CONTENT:;
 width:100%;
 height:100%;
 vertical-align: middle;
 text-align:center;
}
.fullheight { 
 THIS_CENTERS_CONTENT:;
 height:100%;
 vertical-align: middle;
 display: inline-block;
}

#popupbox {
 background:#ebebeb;
 border-radius:15px;
 text-align:left;
 height:auto;
 
 THIS_CENTERS_CONTENT:;
 max-width:90%;
 vertical-align: middle;
 display: inline-block;
}
#popupboxinner {
 THIS_KEEPS_CONTENT_PLACED:;
 max-width:800px; SAME_AS_MAX_IMG_WIDTH:;
 padding:20px 30px;
 min-width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="closepopup">
 <span class="fullheight"></span>
 <div id="popupbox">
  <div id="popupboxinner">
   LIGHTBOX CONTENT - SHOULD NOT CLOSE IF CLICKED
  </div>
 </div>
</div>
<span id="openpopup">OPEN CLICKABLE SEMI TRANSPARENT WRAPPER WITH LIGHTBOX INSIDE</span>

possible duplicate: http://stackoverflow.com/questions/9237516/jquery-click-outside-div-to-hide-a-div But that has your answer: put a click handler on the transparent div :) — Noah B, Mar 09 '15 at 22:50
that's what I did. I put a click handler on the semi transparent div, but it gets triggered as well when I click the lightbox area div inside it, something I don't want. — Paul, Mar 09 '15 at 23:00

score 1 · Accepted Answer · answered Mar 10 '15 at 00:04

$(document).ready( function() {
  $("#openpopup").click(function() {
 $('#closepopup').toggle();
  });
  $("#closepopup").click(function() {
 $('#closepopup').toggle();
  });
  $('#popupbox').click(function(e){
     e.stopPropagation();
  });
});

html, body {height:100%;}
#closepopup {
 background:rgba(0,0,0,.5);
 position:fixed;
 top:0;
 left:0;
 
 THIS_CENTERS_CONTENT:;
 width:100%;
 height:100%;
 vertical-align: middle;
 text-align:center;
}
.fullheight { 
 THIS_CENTERS_CONTENT:;
 height:100%;
 vertical-align: middle;
 display: inline-block;
}

#popupbox {
 background:#ebebeb;
 border-radius:15px;
 text-align:left;
 height:auto;
 
 THIS_CENTERS_CONTENT:;
 max-width:90%;
 vertical-align: middle;
 display: inline-block;
}
#popupboxinner {
 THIS_KEEPS_CONTENT_PLACED:;
 max-width:800px; SAME_AS_MAX_IMG_WIDTH:;
 padding:20px 30px;
 min-width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="closepopup">
 <span class="fullheight"></span>
 <div id="popupbox">
  <div id="popupboxinner">
   LIGHTBOX CONTENT
  </div>
 </div>
</div>
<span id="openpopup">OPEN</span>

thank you. this works, although something else must prevent it on the site I'm working on. — Paul, Mar 10 '15 at 00:25
ah, found it! In your previous example (that I used) you had missed adding a curly bracket on the end. please fix for others to not bang their head ;) — Paul, Mar 10 '15 at 00:32

acupofjose · Answer 2 · 2015-03-09T23:17:41.570

Did a quick markup for you on an example lightbox! Basically, as Noah said, you just put a click event on the transparent div.

Let me know if you have issues following the code!

$('#lightbox-wrapper').click(function() {
  $('#lightbox-wrapper, #lightbox').toggleClass('open');
});


function openLightBox() {
  $('#lightbox-wrapper, #lightbox').toggleClass('open');
}

/* DEFAULT STATE */

#lightbox-wrapper {
  display: none;
}
#lightbox {
  display: none;
}
#lightbox-wrapper.open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
#lightbox.open {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  margin-top: 40vh;
}
#lightbox-content {
  display: block;
  width: 250px;
  margin: 0 auto;
  background: #f1f1f1;
  padding: 5px;
  text-align: center;
  box-shadow: 0px 0px 5px #f5f5f5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="lightbox-wrapper"></div>
<div id="lightbox">
  <div id="lightbox-content">
    <h1>I'm a lightbox</h1>
  </div>
</div>


<button onclick="javascript:openLightBox()">Open Lightbox</button>

This didnt solve my dilemma. I'm sorry I didn't explain myself better. I changed my original question as an effect. — Paul, Mar 09 '15 at 23:04
I'm sorry, your example does not work. And I need the wrapper to contain the lightbox. — Paul, Mar 09 '15 at 23:42

score 0 · Answer 3 · edited Mar 10 '15 at 00:38

0

To stop the click from propagating:

$('#lightbox').click(function(e){
  e.stopPropagation();
});

Just swap out #lightbox for the id of your inner div (the lightbox inside the transparent div) and add this to your existing code.

// edited - added curly bracket on end. - Paul

edited Mar 10 '15 at 00:38

Paul

1,624
5
18
24

answered Mar 09 '15 at 23:07

Noah B

331
1
9

could you please place this in it's context as a working example? – Paul Mar 09 '15 at 23:08
You can add this to your working code, or Schultzie's code below. – Noah B Mar 09 '15 at 23:23
I tried adding it to both my own version and Schultzie's version, with result that a click does nothing. I would be very grateful if you could show me a working example. – Paul Mar 09 '15 at 23:46
Sorry @Paul! I thought that's what you wanted: click on the lightbox to do nothing, click outside the lightbox to close the lightbox? – Noah B Mar 09 '15 at 23:52
problem is that clicking outside the lightbox does nothing. – Paul Mar 10 '15 at 00:00
I added my code above, if you kindly could edit it so it works? – Paul Mar 10 '15 at 00:01
Done - added a new answer :) – Noah B Mar 10 '15 at 00:07

jquery click triggered by underlaying div

3 Answers3