web-dev-qa-db-ja.com

Close bootstrap「hide」と「data-dismiss」を使用せずにモーダル

bootstrapモーダルボックスを条件付きで閉じたい。$('#modal').modal('hide');を使用すると、コードに問題が発生する。HTMLでdata-dismiss="modal"を使用すると、テンプレート、モーダル却下アクションは、実際の機能がボタンクリックで実行される前に実行されます。

だから、bootstrap modalを閉じる他の方法や、実行時にdata-dismiss="modal"を使用するアイデアはありますか？

jquerytwitter-bootstrapbootstrap-modal
14
Ruchi Agarwal

hideイベントにサブスクライブし、イベントでpreventDefaultを使用することにより、data-dismiss属性自体を使用する自動モーダルクローズ動作または手動モーダルオープニング（現在実行していると思います）で実行できます。

$('yourmodalselector').on('hide',function(e){
   if(yourConditionNotToCloseMet){
      e.preventDefault();
   }
});

デモ

Demo2

ドキュメント を参照してください

hideイベントイベントは、hideインスタンスメソッドが呼び出されるとすぐに発生します。これは、メソッドが呼び出されるときに取得され、モーダルが閉じないようにする最適な場所です。

14
PSL

このような別のボタンを作成します

<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>

このボタンにはdata-dismiss="modal"。必要に応じてこれを非表示にすることができます。

これで、カスタマイズされた方法で他の関数を使用でき、モーダルを非表示にする場合は呼び出すことができます

$(".btn-warning").click();
3
Bugfixer