javascript - 在其外部单击关闭 DIV 弹出窗口

Question

我有这个代码，我想关闭这个 <div>通过在其外部单击而不是仅通过单击关闭按钮来弹出。

我该怎么做？

<script language="JavaScript">
 <!--
function displayPopup(alert_MSG) {

    var theDetail = document.getElementById(alert_MSG);
        theDetail.style.display="block";
}

function closePopup(alert_MSG) {

    var theDetail = document.getElementById(alert_MSG);

    if (theDetail.style.display=="block") {
        theDetail.style.display="none";
    }
}
-->
</script>

这是 HTML 链接:

<a href="javascript:displayPopup(<?=$id_pic?>)">open div here</a>

这是我的弹出窗口:

<div id="<?=$id_pic?>" class="myPopup" style="display:none;">
<div class="closeButton">
<a href="javascript:closePopup(<?=$id_pic?>)">Close</a>
</div>
Popup content here
</div>

Answer 1

$(document).click(function(event) {
    if ( $(event.target).closest(".myPopup").get(0) == null ) {         
    alert('clicked outside');           
    } else{
    alert('clicked inside');
    }
});

这对我有用。