0

AJAX と jQuery モーダル ボックスで発生した問題の修正がようやく終了しました。

典型的な効果を追加したいだけですが、コードがわかりません。

効果 1:モーダル ボックスが開いたときに、「背景」をフェードさせたい

効果 2: X を押してボックスを閉じると、ゆっくりと消えていきます

見て：

<script src="js/simplemodal.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#message-sent').hide();
        $('#contact-form').submit(function() {
            $.ajax({
                type: "POST",
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function() {
                    $("#message-sent").modal({
                        onOpen: function(dialog) {
                            dialog.overlay.fadeIn('slow', function () {
                                dialog.container.fadeIn('slow', function () {
                                    dialog.data.fadeIn('slow');
                                });
                            });
                        },
                        onClose: function (dialog) {
                            dialog.data.fadeOut('slow', function () {
                                dialog.container.fadeOut('slow', function () {
                                    dialog.overlay.fadeOut('slow', function () {
                                        $.modal.close();
                                    });
                                });
                            });
                        },
                        closeClass: 'close-btn'
                    });
                }
            });
            $('#contact-form')[0].reset();
            return false;
        });
    });
</script>
4

1 に答える 1

0

あなたが見ているのは、SimpleModal に組み込まれているオプションを使用して、必要なものを実現することです。

コードのこのセクション:

success: function() {
    $("#message-sent").fadeIn().modal({
         closeClass: 'close-btn'
    });
}

SimpleModal によって提供される組み込み構造を使用してモーダル ボックスを起動するように変更する必要があります。dialog.overlay.fadeIn()背景をフェードさせるために見ているのは次のとおりです。

success: function() {
    $("#message-sent").modal({
        onOpen: function(dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.container.fadeIn('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });
        }
    });
}

モーダル ボックスを閉じる場合は、 を呼び出してモーダル ボックスを閉じるか、クリック時にモーダル ボックスを閉じることができるようにする任意の要素にクラスを$.modal.close();割り当てることができます。simplemodal-closeSimpleModal は、閉じるアクションをそれらに自動的にバインドします。

以下を使用して、最後にアニメーションを追加することもできます。

onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.fadeOut('slow', function () {
            dialog.overlay.fadeOut('slow', function () {
                $.modal.close();
            });
        });
    });
}
于 2013-03-07T00:42:26.560 に答える