.click on parent container only, not affecting child containers

Question

I am creating an overlay/modal/pop-up on my site.

When the user clicks a button the overlay appears. To close the overlay I wish for the user to be able to click anywhere on the outside area of the page (e.g the black opacity area in my example).

JSFiddle: https://jsfiddle.net/7ewexsqr/

I have set the following:

$('.overlay-wrapper').click(function(){
        $('.overlay-wrapper').css('opacity','0');
        $('.overlay-wrapper').css('z-index','-100');
    });

This works fine, however it is also affecting clicking inside the .overlay-content div, a child of .overlay-wrapper. I want the user to be able to click/highlight etc inside the content box and NOT trigger the click event.

How can I make this click event not apply to the inner content?

Answer 1

Check the event.target, if it's .overlay-content, or a descendant of .overlay-content, don't close the popup (you can use .closest() since it'll test itself):

var $target = $( e.target );

if ( $target.closest( '.overlay-content' ).length ) {
    return true;   
}

Here's a fiddle

Answer 2

Where it comes from

Your problem originates in so-called event bubbling.

How to solve it

There is a specific jQuery method to solve exactly this. Use

$('.overlay-content').on("click", function(event){
    event.stopPropagation(); 
});

This stops the click event inside your overlay content to bubble to the .overlay-wrapper and thus, does not trigger its click function any more.

Working example, using your code

https://jsfiddle.net/7ewexsqr/5/

Answer 3

Check if the target is same.

if( e.target != this ) 
         return;

Try this:

$('.overlay-wrapper').click(function(e) {
    if (e.target != this)
      return;
    $('.overlay-wrapper').css('opacity', '0');
    $('.overlay-wrapper').css('z-index', '-100');
  });

Snippets:

$(document).ready(function() {
  $('.button').click(function() {
    $('.overlay-wrapper').css('opacity', '1');
    $('.overlay-wrapper').css('z-index', '100');
  });

  $('.overlay-wrapper').click(function(e) {
    if (e.target != this)
      return;
    $('.overlay-wrapper').css('opacity', '0');
    $('.overlay-wrapper').css('z-index', '-100');
  });

});

.button {
  background-color: orange;
  color: #fff;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}
.overlay-wrapper {
  opacity: 0;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.overlay-content {
  border: 1px dotted white;
  padding: 10px;
  margin: 50px;
  background-color: #000;
  cursor: default;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
  padding: 0;
  color: #fff;
}
body {
  font-family: Arial;
  background-size: cover;
  background-image: url('http://www.imgbase.info/images/safe-wallpapers/digital_art/2d/31494_2d_funky_colorful.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="overlay-wrapper">
  <div class="overlay-content">
    <h1>Clicking inside this box should *do NOTHING*</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum.
      Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean
      mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.</p>
  </div>
</div>

Answer 4

All other answers propose for you to write some JavaScript which may work but it's not a proper way to handle this problem.

The simplest and most effective way is to move the overlay-contentdiv outside of overlay-wrapper div and than position it propery with CSS.

<div class="button">Click me!</div>
<div class="overlay-wrapper">

</div>
<div class="overlay-content">
  <h1>Clicking inside this box should *do NOTHING*</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse   congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum. Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.    </p>
</div>

and than you should change the opacity and z-index on overlay-content div

Answer 5

Attach a click handler to the overlay itself with false

$('.overlay-content').click(false);

$(document).ready(function(){
    $('.button').click(function(){
        $('.overlay-wrapper').css('opacity','1');
        $('.overlay-wrapper').css('z-index','100');
    });
    $('.overlay-content').click(false);
    $('.overlay-wrapper').click(function(){
        $('.overlay-wrapper').css('opacity','0');
        $('.overlay-wrapper').css('z-index','-100');
    });
});

.button{background-color:orange;color:#fff;padding:10px;display:inline-block;cursor:pointer;}
.overlay-wrapper {
    opacity:0;
    z-index:-100;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.4);
    cursor:pointer;
}
.overlay-content{
    border:1px dotted white;
    padding:10px;
    margin:50px;
    background-color:#000;
    cursor:default;
}
html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
h1,p {
    margin:0;
    padding:0;
    color:#fff;
}
body {
    font-family:Arial;
    background-size:cover;
    background-image:url('http://www.imgbase.info/images/safe-wallpapers/digital_art/2d/31494_2d_funky_colorful.jpg');}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="overlay-wrapper">
    <div class="overlay-content">
         <h1>Clicking inside this box should *do NOTHING*</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum. Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.</p>
    </div>
</div>

Or, utilize event.target

if (!$(event.target).closest('.overlay-content').length)

$(document).ready(function() {
  $('.button').click(function() {
    $('.overlay-wrapper').css('opacity', '1');
    $('.overlay-wrapper').css('z-index', '100');
  });

  $('.overlay-wrapper').click(function(event) {
    if (!$(event.target).closest('.overlay-content').length) {
      $('.overlay-wrapper').css('opacity', '0');
      $('.overlay-wrapper').css('z-index', '-100');
    }
  });
});

.button {
  background-color: orange;
  color: #fff;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}
.overlay-wrapper {
  opacity: 0;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.overlay-content {
  border: 1px dotted white;
  padding: 10px;
  margin: 50px;
  background-color: #000;
  cursor: default;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
  padding: 0;
  color: #fff;
}
body {
  font-family: Arial;
  background-size: cover;
  background-image: url('http://www.imgbase.info/images/safe-wallpapers/digital_art/2d/31494_2d_funky_colorful.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="overlay-wrapper">
  <div class="overlay-content">
    <h1>Clicking inside this box should *do NOTHING*</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum.
      Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean
      mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.</p>
  </div>
</div>