web-dev-qa-db-ja.com

Twitter Bootstrap Modalに関数をバインドします閉じる

私は新しいプロジェクトでTwitter Bootstrap libを使用していて、モーダルクローズで最新のjsonデータを更新して取得するためにページの一部が欲しいと思います。私は誰かが私にそれを指摘したり、解決策を提案することができるドキュメント内のどこにもこれを見てはいけない。

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

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

私はすでに "hide"クラスをモーダルにアタッチしているので、ページロード時には表示されず、2回ロードされます。

hideクラスを削除し、要素IDをdisplay:noneに設定し、近いときに何も起こらないときに上記の関数にconsole.log("THE MODAL CLOSED");を追加したとしても。

jquerymodal-dialogtwitter-bootstrap
475
BillPull

ブートストラップ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 →を参照してください。

1000
Ricardo Lima

ブートストラップ4

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

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

http://jsfiddle.net/aq9Laaew/120440/ /

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

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

109
aar0n

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

1. モーダル "hide"イベントが開始されたとき 

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

2. モーダル "hide"イベントが終了したとき 

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

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

43
aesede

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

つかいます：

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
14
Oscar
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
13
SUNny.K

Bootstrap は、モーダルが隠されたときに event を起動したい場合のように、 modal にフックできるイベントを提供します。このように hidden.bs.modal イベントを使用できるユーザー

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

動作確認 フィドルはこちら モーダルメソッドやイベントの詳細はDocumentationをご覧ください。

6
Subodh Ghulaxe

ブートストラップ4：

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

hide.bs.modal ：このイベントは、hideインスタンスメソッドが呼び出された直後に発生します。

hidden.bs.modal ：このイベントは、モーダルがユーザーから隠されたときに発生します（CSSの遷移が完了するのを待ちます）。

2
sendon1982

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

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

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

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

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

IE 8ではJqueryの:not()セレクターがサポートされていないため、この解決策はIE 8では機能しません。

2
Tortus

私はいくつかと同じ問題を抱えていた

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

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

2
Michael Granger

私はここで非常に遅くまで飛んでいますが、ReactでBootstrapモーダルを使っている人のために 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％ にしています。

誰かに役立つことを願っています:)

乾杯、

ジェイク

1
jacobedawson

私はこのようにするでしょう：

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

残りはすでに他の人によって書かれています。私はまたドキュメンテーションを読むことを勧めます： jquery - on method

0
tkartas