How to make my popup disappear when clicking out of it?

I am trying to show my popup using the following code and make it disapear when clicking on window:

<div class="popup">
        <h3>Surface</h3>
        <p class="hide">lorem ipsum</p>
</div>

$('div.popup').hide();
if($('div.popup').is(':hidden')){
    $('button.mark').on('click',(e) =>{
        e.preventDefault()
        $('div.popup').show();
    })
}else{
        $(window).on('click',() => {
        $('div.popup').hide();
    })
}

The if and else blocks works independently but together they don't...

$('button.mark').on('click',(e) =>{
    e.preventDefault()
    $('div.popup').show();
  })

If i write the code above my div appears.

  $(window).on('click',() => {
     $('div.popup').hide();
})

If i write this one and the div is not originally show , it hides it.

I thought if i combine both it would works but no because there is two click event that do opposite stuff. So thats why i wanted to do an if