I'm creating a lightbox without using a jquery plugin, and now I'm trying to close it by clicking on the close button or by clicking anywhere else outside of the white area (.white_content)

Jsfiddle Example

<button onclick=document.getElementById('lightbox').style.display='inline';>

    Show lightbox

</button>



<!-- LIGHTBOX CODE BEGIN -->

<div id=lightbox class=lightbox style=display:none>

    <div class=white_content>

        <a href=javascript:void(0) onclick=document.getElementById('lightbox').style.display='none'; class=textright>Close</a>

            <p>Click anywhere to close the lightbox.</p>

            <p>Use Javascript to insert anything here.</p>

    </div>

</div>

<!-- LIGHTBOX CODE END -->

Although it's not just like I want it. I want it to close only if I click on the dark area of the lightbox and not on the white container (.white_content), I've heard that event.propagation can be a bad thing to use, so here's how I'm closing the lightbox

$(document).on('click', function(event) {

  if (!$(event.target).closest('button').length) {

    $(.lightbox).hide();

  }

});