點擊遠離它關閉模式彈出

Question

我使用本教程中添加模態屏幕：

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

一切正常，除了關閉它的偉大。我不想通過按鈕關閉它，我想讓用戶可以通過單擊模式外部的按鈕來關閉它，即在其後面的其他頁面的背景中。

用戶告訴我要補充onclick='overlay()'到覆蓋DIV這樣<div id="overlay" onclick='overlay()'>

當我嘗試通過單擊之外，如果它，它的工作原理，關閉模式，但如果你點擊的實際模式本身，還會關閉，我不想要它，因爲它是一個註冊表單。那麼有沒有什麼方法可以通過點擊實際模態本身之外來關閉模態？

Answer 1

試試這個：

$(document).ready(function(){ 
$('#overlay').bind('click', function(event){ 
    if (event.target == $('#overlay').get(0)) 
     overlay(); 
}); 

Answer 2

您將不得不從模態窗口移動疊加層的代碼。 將此區分開來，您不會將覆蓋圖作爲窗口的父項，並且點擊事件只會在覆蓋圖上觸發。

<div id="overlay"> </div> 
<div id="modalWindow"> 
    <p>Content you want the user to see goes here.</p> 
</div>