93

ブートストラップ 3 ドキュメントのモーダルの例を使用しています。モーダルが動作します。ただし、発生時に show.bs.modal イベントにアクセスする必要があります。今のところ私はただ試しています：

$('#myModal').on('show.bs.modal', function () {
   alert('hi')
})

何も起こらず、イベントは発生しません。私は何を間違っていますか??? これは私には意味がありません。

4

20 に答える 20

113

これを使って：

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
于 2016-02-21T16:04:51.880 に答える
85

on('shown.bs.modal')モーダルをインスタンス化してポップアップする前に、必ず

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });

また

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
}).modal('show');

フィールドに焦点を当てるにはshown.bs.modal、代わりにを使用するshow.bs.modalことをお勧めしますが、他の理由で、背景に何かを隠したり、モーダルが表示される直前に何かを設定したりしたい場合は、show.bs.modal関数を使用します。

于 2014-08-23T22:15:58.827 に答える
12

これを試して

$('#myModal').on('shown.bs.modal', function () {
   alert('hi');
});

shownの代わりに使用しshowて、関数とアラートの最後にセミコロンがあることを確認してください。

于 2013-10-09T18:21:40.663 に答える
0

a を配置する一般的な解決策setTimeoutは、場合によってはうまくいく可能性がありますが、ひどい解決策です。私は自分でそれを$(document).ready()オフコースでラップしながら使用していましたが（しかし、それは役に立ちませんでした）、信頼できる解決策を得ることができませんでした. 一部のブラウザ/システムは他のものより時間がかかり、時には1000ms十分ではありませんでした. そして、なぜ$(document).ready()助けにならなかったのかを探すのに疲れていたので、:

私は別のアプローチを取りました。

初めてモーダルを使用する必要があるときに、モーダル イベントを購読します。

<a href="javascript:void(0)" onclick="ShowModal()">Open my modal</a>

そしてJS側で：

function ShowModal() {
    InitModalEventsOnce();
    $('#MyModal').modal('show');
}

var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion

function InitModalEventsOnce() {

    if (!InitModalEventsIsDone) {
        InitModalEventsIsDone = true;

        $('#MyModal').on('shown.bs.modal', function () {
            // something
        })

        $('#MyModal').on('hidden.bs.modal', function (e) {
            // something
        });
    }
}

以上です！私が見つけた唯一の信頼できる解決策。

于 2021-05-12T08:17:08.183 に答える
-1

以下に詳細を示します。

show.bs.modal はモデル ダイアログの読み込み中に機能し、show.bs.modal は読み込み後に何かを実行するために機能しました。ポストレンダリング

于 2014-06-12T10:09:24.430 に答える