单击弹出窗口时如何使我的弹出窗口消失？

Question

我正在尝试使用以下代码显示我的弹出窗口，并在单击窗口时使其消失：

<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();
    })
}

if 和 else 块独立工作，但它们不能一起工作...

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

如果我写上面的代码，我的 div 就会出现。

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

如果我写了这个并且div最初没有显示，它会隐藏它。

我想如果我将两者结合起来会起作用，但不会，因为有两个点击事件做相反的事情。 所以这就是为什么我想做一个 if