2

<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>
4

4 に答える 4

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

これは私にとってはうまくいきます。

于 2012-12-10T08:25:26.317 に答える
2

これをwebkitで見てください。CodePen.IO

#overlay {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 40;
}

と：

document.getElementById("overlay").addEventListener("click", closePopup, false );
document.getElementById("popup").addEventListener("click", stopPropagation, false );
于 2012-12-10T08:52:19.843 に答える
0 
$('body').click(function(){
   $(".myPopup").hide();
});

編集：

たぶん、これでコードをラップできます：

<body>
   <a href="javascript:closePopup(<?=$id_pic?>)" style="curser:default">
      // all your code
   </a>
</body>
于 2012-12-09T13:44:52.830 に答える
0

試す：

document.onmousedown = function(){
    if(event.target.className != 'myPopup')
        document.getElementsByClassName('myPopup')[0].style.display = 'none';
}
于 2012-12-09T13:42:07.693 に答える