ブートストラップモーダルオープンで関数を呼び出す

以前は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!");
});

必要なものに基づいて、showed event / show eventを使用できます。

$( "#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ドキュメントを参照してください。

動作しません。$(window)代わりに使用してください

上映用

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

非表示にする

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

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

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

ブートストラップモーダルはイベントを公開します。shownこのようなイベントを聞いてください

$('#my-modal').on('shown', function(){
  // code here
});

誰かがまだ問題を抱えている場合、（loaded.bs.modal）を使用することで私にとって完璧に機能する唯一のものは：

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

ブートストラップモデルの表示と非表示にbelwコードを使用できます。

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

モデルを非表示にする場合は、以下のコードを使用できます。

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

この回答があなたのプロジェクトに役立つことを願っています。