208

以前は JQuery UI のダイアログを使用していましたがopen、ダイアログが開いたときに実行する Javascript コードを指定できるオプションがありました。そのオプションを使用して、私が持っている機能を使用してダイアログ内のテキストを選択したでしょう。

今、ブートストラップのモーダルを使用してそれを行いたいです。以下は HTMl コードです。

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

そして、モーダルを開くボタンについては：

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

ボタンの onclick リスナーを使用しようとしましたが、モーダルが表示される前に警告メッセージが表示されました。

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});
4

5 に答える 5

395

必要に応じて、 shown イベント/show イベントを使用できます。

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

デモ:プランカー

Bootstrap 3.0 のアップデート

Bootstrap 3.0 では、表示されているイベントを引き続き使用できますが、次のように使用します。

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

ここの「イベント」の下にあるBootstrap 3.0のドキュメントを参照してください。

于 2013-07-04T04:06:25.787 に答える
106

動作しません..$(window)代わりに使用します

見せるために

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

隠れるため

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
于 2014-04-28T15:18:24.573 に答える
29

モーダルを開いた後ではなく、モーダルを開く直前に関数をロードするshow代わりに使用できます。shown

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
于 2016-11-17T11:52:52.397 に答える
10

ブートストラップ モーダルはイベントを公開します。shownこのようなイベントをリッスンします

$('#my-modal').on('shown', function(){
  // code here
});
于 2013-07-04T04:07:55.470 に答える