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 に答える