關閉DIV彈出窗口點擊它外面

我有這段代碼，我想通過點擊它的外部而不是點擊關閉按鈕關閉這個<div>彈出窗口。關閉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>

來源

2012-12-09 fabikus

是彈出模式（用戶不能點擊其他任何東西，而它的開放）？如果是這樣，你可以在彈出窗口下放置一個完整頁面的透明div（以及其他所有內容）。然後添加一個onclick事件處理程序到透明div來關閉彈出窗口（類似於向body標籤添加onclick事件處理程序，但不太可能導致衝突）。您必須跟蹤哪個彈出窗口當前處於打開狀態，以便您知道要關閉哪個彈出窗口。 –

您應該在彈出窗口（100％x100％）下方使用（不可見）疊加層，以捕捉彈出窗口外的任何點擊。如果你不使用它，那麼其他元素可能會停止事件的傳播，下面的解決方案將不會總是起作用。然後添加自己的jsFiddle會很有幫助，因爲人們並不總是有時間將您的情況與代碼整合。 – EricG

嘗試：

document.onmousedown = function(){ 
    if(event.target.className != 'myPopup') 
     document.getElementsByClassName('myPopup')[0].style.display = 'none'; 
}

來源

2012-12-09 13:42:07

不能使它工作:( – fabikus

$('body').click(function(){ 
    $(".myPopup").hide(); 
});

編輯：

也許你可以用你的代碼在此：

<body> 
    <a href="javascript:closePopup(<?=$id_pic?>)" style="curser:default"> 
     // all your code 
    </a> 
</body>

來源

2012-12-09 13:44:52 ParPar

它不起作用彈出窗口總是隱藏只有按鈕 – fabikus

@fabikus如果該函數總是關閉當前彈出 - 請參閱我的版本是否可以幫助您 – ParPar

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

這對我的作品。

來源

2012-12-10 08:25:26 AnAspiringCanadian

我真的很喜歡這種方法。 –

關注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-10 08:52:19 EricG

關閉DIV彈出窗口點擊它外面

回答

相關問題