関数をTwitter Bootstrap Modal Closeにバインドします

StackOverflow https://stackoverflow.com/questions/8363802

質問

Twitter Bootstrap Libを新しいプロジェクトで使用しています。ページの一部を更新してModal Closeの最新のJSONデータを取得したいと考えています。ドキュメントのどこにもこれを見ていません。誰かが私にそれを指摘したり、解決策を提案したりできます。

文書化された方法の使用に関する2つの問題

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

「非表示」クラスを既にモーダルに添付しているので、ページの読み込みに表示されないため、2回読み込まれます

非表示クラスを削除して、要素IDをに設定しても display:none そして追加します console.log("THE MODAL CLOSED"); 私が閉じたときの上記の関数に何も起こりません。

役に立ちましたか？

解決

ブートストラップ3＆4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

ブートストラップ3： getBootStrap.com/javascript/#modals-events

ブートストラップ4： getBootStrap.com/docs/4.1/components/modal/#events

ブートストラップ2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

見る getBootStrap.com/2.3.2/javascript.html#modals →イベント

他のヒント

ブートストラップ4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

実用的な例については、このjsfiddleを参照してください。

https://jsfiddle.net/6n7bg2c9/

ドキュメントのモーダルイベントセクションをこちらをご覧ください。

https://getbootstrap.com/docs/4.3/components/modal/#events

起動 ブートストラップ3 (編集： まだ同じです ブートストラップ4）イベントを起動できる2つのインスタンスがあります。

1. モーダルの「非表示」イベントが始まるとき

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});

2. モーダルの「非表示」イベントが終了したとき

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

参照： http://getbootstrap.com/javascript/#js-events

「ライブ」の代わりに、「ライブ」イベントで使用する必要がありますが、ドキュメントオブジェクトに割り当てます。

使用する：

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

ブートストラップ フックできるイベントを提供します モーダル, 、あなたが発射したい場合のように イベント モーダルがユーザーから隠され終わったら、使用できます hidden.bs.modal このようなイベント

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

作業を確認してください ここでフィドル モーダルの方法とイベントの詳細については、こちらをご覧ください ドキュメンテーション

ブートストラップ4：

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs.modal：このイベントは、Hide Instanceメソッドが呼び出されたときにすぐに解雇されます。

hidden.bs.modal：このイベントは、モーダルがユーザーから非表示に終了したときに解雇されます（CSSの移行が完了するのを待ちます）。

ブートストラップイベントに関する多くの答えを見てきました hide.bs.modal モーダルが閉じるとトリガーされます。

これらのイベントには問題があります。モーダルのポップアップ（ポップオーバー、ツールチップなど）がそのイベントをトリガーします。

モーダルが閉じるときにイベントをキャッチする別の方法があります。

$(document).on('hidden','#modal:not(.in)', function(){} );

ブートストラップはを使用します in モーダルが開いているときのクラス。使用することが非常に重要です hidden クラス以来のイベント in イベント時にまだ定義されています hideトリガーされます。

IE8はjQueryをサポートしていないため、このソリューションはIE8で機能しません :not() セレクタ。

私は一部の人と同じ問題を抱えていました

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

これをページの一番下に配置する必要があります。上部に配置すると、イベントが発生することはありません。

私はここで非常に遅れてジャンプしていますが、私が使用しているReactでブートストラップモーダルを使用している人のために MutationObserver モーダルの可視性の変化を検出し、それに応じて状態を調整するために、この方法を適用して、モーダルが閉じたときに機能を実行できます。 

//react stuff
componentDidMount: function() {
    var self = this;
    $(function() {
        $("#example_modal").addClass('modal');
        //use MutationObserver to detect visibility change
        //reset state if closed
        if (MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            //use jQuery to detect if element is visible
            if (!$('#example_modal').is(':visible')) {
                //reset your state
                self.setState({
                    thingone: '',
                    thingtwo: ''
                });
            }
        });
        var target = document.querySelector('#example_modal');
            observer.observe(target, {
                attributes: true
          });
        }
    });
}

現代のブラウザのサポートについて疑問に思っている人のために、CaniuseはMutationObserverの報道を持っています 約87％

それが誰かを助けることを願っています:)

乾杯、

ジェイク

私はこのようにそれをします：

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

残りはすでに他の人によって書かれています。ドキュメントも読むことをお勧めします。jQuery-メソッドについて

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top