點擊外面的jQuery模式關閉

Question

我已經看到了各種方法來解決這個問題，但是找不到解決方案（我在Java/jQuery方面不太熟練）。我有一個生成以下代碼的PHP腳本 - 工作正常。

我的問題是如何修改這個，以便在框外點擊也會關閉模態？ （我可以處理不斷變化的PHP驅動器的代碼）

jQuery(document).ready(function() 
       { 
        jQuery('#modal-messages').css('margin-top', ((jQuery(window).height() - jQuery('#modal-messages').outerHeight())/2) + jQuery(window).scrollTop() + 'px'); 
        jQuery('#modal-messages').css('margin-left', ((jQuery(window).width() - jQuery('#modal-messages').outerWidth())/2) + jQuery(window).scrollLeft() + 'px'); 
        jQuery('#modal-messages').show();jQuery('#messages-overlay').show(); 

        jQuery('#messages-close-button').click(function() 
        { 
         jQuery('#messages-overlay').hide(); 
         jQuery('#modal-messages').hide(); 
        }); 

        jQuery('#messages-overlay').click(function() 
        { 
         jQuery('#messages-overlay').hide(); 
         jQuery('#modal-messages').hide(); 
        });jQuery('#modal-messages').bind('clickoutside', function(event) 
        { 
         jQuery('#messages-overlay').hide(); 
         jQuery('#modal-messages').hide(); 
        });}); 

Answer 1

你爲什麼不只是添加下面的模式

<div id="greyedArea"></div> 

另一個 「灰色」 區域與CSS

#greyedArea { 
background: black; 
opacity:0.25; 
width: 100%; 
} 

然後您可以通過使用觸發關閉程序

$('#greyedArea').on('click', function() { 
$('#messages-overlay').hide(); 
$('#modal-messages').hide(); 
});