clicking the parent div and children div

Question

I am trying to implement something like this:

If the user clicked that specific link, a div will cover everything, clicking anywhere the grey area will close.

Here is how i implemented it:

<div id="cover" style="width:100%;height:100%;background-color:rgba(109,109,109,0.8);z-index:3; position:absolute; top:0px;left:0px;">
<div class="contactinfo">
</div>
</div>

It will be hidden at first by:

var $cover = $('#cover');
$cover.hide();

and it is controlled by:

$('.contact').click(function(){
$cover.show();
});

$cover.click(function(){
$cover.hide();
});

But the problem is that it still closes after i click the white area(inner div), i dont want it to close. What should i do? It should only close if the grey area is clicked.

this is my css for the inner div:

.contactinfo{

margin-top:200px;
margin-left:auto;
margin-bottom:auto;
margin-right:auto;
border:solid;
height:300px;
width:300px;
border-radius:25px;
background-image:Url('https://www.kiwiconferencing.co.nz/wp-content/uploads/2015/03/Grey-Background-43.jpg');

}

Answer 1

You have to compare, whether the clicked item is your $cover item.

$cover.on('click', function(e){
    if( e.target != this ) {
       //The clicked item is your inner div 
       return;
    }
    //Your clicked item is your $cover div
    $cover.hide();
});