Targeting lower layer to close a modal box

Question

I've got a simple modal box opening like this:

<div id="social" class="overlay">
  <div class="inner">
    <a class="close" href="#"><span class="icon-close"></span></a>

    CONTENT

 </div>
</div>

Here's the CSS:

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 100; 
    background: fade(@black, 75%); 
    display: none;
    z-index: 999;   
}

#social .inner {
    margin: 0 auto;
    z-index: 1000;  
    width: 380px;
}

And here is the JS:

 $(document).ready(function(){
    $("#social").css("height", $(document).height());

    $(".social").click(function(){
        $("#social").fadeIn();
        return false;
    });

    $(".close").click(function(){
        $("#social").fadeOut();
        return false;
    });
});

The modal box closes when someone clicks on the link with the class close. I'd like the modal box to also close when someone clicks anywhere outside the modal box, so anywhere on the overlay layer (z-index:999). I don't know how to target the lower layer (z-index:999) without also affecting the top layer (z-index:1000).

I don't know much about jQuery, so if you could phrase your suggestions in a newbie way, that'd be great. Thanks! :)

score 1 · Accepted Answer · edited May 13 '13 at 11:48

You can fade out the modal box when the overlay is clicked by attaching a click event handler on the overlay. JSFiddle

HTML

<input type="button" class="social" value="test" />
<div id="social" class="overlay">
    <div class="inner"> 
        <a class="close" href="#">
            <span class="icon-close">X</span>
        </a>
        CONTENT
    </div>
</div>

CSS

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}
#social .inner {
    margin: 0 auto;
    z-index: 1000;
    width: 380px;
}

jQuery

 $(document).ready(function () {

     $("#social").css("height", $(document).height());

     $(".social").click(function () {
         $("#social").fadeIn();
         return false;
     });

     $(".close").click(function () {
         $("#social").fadeOut();
         return false;
     });


     //This is the part that handles the overlay click
     $("#social").on('click', function (e) {
         if (e.target == this) {
             $(this).fadeOut();
         }
     });
 });

Thanks! But this will close the modal box also when I click on the content (the actual modal box). I only want it to close when I click outside the modal box, i.e. on the background. — Kai Brach, May 13 '13 at 12:14
One more question: if I wanted to hide the modalbox also by pressing the ESC key, is there an easy way for this? — Kai Brach, May 13 '13 at 12:51
Refer to [this](http://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-javascript). Bind the keyup event to the overlay, should work. — Vimal Stan, May 13 '13 at 12:57

Targeting lower layer to close a modal box

1 Answers1