2

私はjQueryを初めて使用します。SimpleModalについて質問があります。

アニメーション効果でポップアップウィンドウを閉じようとしていますが、失敗しました。

これが私のコードです。

 $('#btnClose').click(function(e) {
            // Closing animations
            $("#content").modal({ onClose: function(dialog) {
                dialog.data.fadeOut('slow', function() {
                    dialog.container.hide('slow', function() {
                        dialog.overlay.slideUp('slow', function() {
                            $.modal.close();
                        });
                    });
                });
            }
            });

        });
<div id="content" style="display: none;">
    <h1>Basic Modal Dialog</h1>
    <a href='#' id="btnCloset">Close</a>
</div>

「閉じる」リンクをクリックしても何も起こりません。何か助けてください？どうもありがとうございます！

4

2 に答える 2

3

元の、受け入れられた答え

HTML idタグのつづりを間違えたため、何も起こりませんbtnClose（あなたはそれを呼んでいますbtnCloset）。それにもかかわらず、提供されたコードでは機能しません。これが機能するためです。btnCloseリンクをクリックすると、からsimpleModalボックスが作成され、#content閉じたときに、onCloseオプション（これは正しいです）。つまり、実際にはどこかで閉じるように指示しているのではなく、モーダルダイアログであると指示しているだけです。

代わりに、現在のように要素からモーダルを作成する必要がありますが、のクリックイベント#contentとは別に作成してください。#btnClose次に、クリックイベントをバインドしてダイアログを閉じる必要があります。

ここにいくつかのコードがあります

$(function() {
    /* Make #content a modal */
    $("#content").modal(
     {
        onClose: function(dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.slideUp('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this!
                    });
                });
            });

        }
     }
    );

    /* When #btnClose is clicked, close the modal */    
    $('#btnClose').click(function(e) {
        $.modal.close();
    });
});


ちなみに、にクラスsimplemodal-closeを追加すると#btnClose、simpleModalによって自動的にダイアログが閉じます。クリックイベントを自分でバインドする必要はありません。

フィードバックに基づく新しい回答

わかりました。このアドオンがどのように機能するかを誤解しました。プレーンなjQueryダイアログプラグインのようなものだと思いましたが、今理解しているように、目標は既存の表示可能な要素をダイアログにし、閉じるときに元の形式に戻すことです。 。新しいコードは、ダイアログの状態を追跡し（リンクに保存doOpenし、dataクリックするたびに切り替えることで）、ダイアログを開いたり閉じたりします。これがあなたがそれを機能させたかった方法に近いことを願っています:)

$(function() {
    $("#btnClose")
    .data("doOpen", true)
    .click( function() {
        /* check whether or not we are to open or close the dialog */
        var doOpen = $(this).data("doOpen");
        /* toggle the data */
        $(this).data("doOpen", !doOpen);

        if (doOpen) {
            $("#content").modal({
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function () {
                        dialog.container.slideUp('slow', function () {
                            dialog.overlay.fadeOut('slow', function () {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });
        }
        else {
            $.modal.close();
        }
    });
});
于 2010-06-08T17:49:23.697 に答える
1

これが完全に機能しているコードです。

$('#btnOpen').click(function(e) {
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });
        $('#btnClose').click(function(e) {
            $.modal.close();

        });
于 2010-06-08T23:55:23.833 に答える