1

我已经看到了解决这个问题的各种方法，但是找不到适合我情况的解决方案（反正我对 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();
                    });});
4

1 回答 1

1

为什么不在模态下方添加另一个“灰色”区域

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

与CSS

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

然后您可以使用它来触发关闭过程

$('#greyedArea').on('click', function() {
 $('#messages-overlay').hide();
 $('#modal-messages').hide();
});
于 2012-11-19T10:10:04.170 回答