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();
});

单击jQuery模式外部以关闭

1 个答案: