.click on parent container only, not affecting child containers

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: http://ift.tt/1KM1Xqr

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?