web-dev-qa-db-ja.com

Bootstrap modal backdrop = 'static' not working

まず、これを使用してモーダルを開きます。

$('#myModal').modal('show');

次に、別の状況では、Escキーを押したり外側をクリックしたりしても、この同じモーダルが閉じないようにする必要があるため、これを使用します。

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

しかし、最初の方法でモーダルを開くと、2番目の方法は機能しません。ヒントはありますか？

backdrop値の切り替えを強制するにはどうすればよいですか？

twitter-bootstrap-3bootstrap-modal
13
João Paulo

この問題の回避策を見つけました。

モーダルが非表示になった後bootstrapデータはまだ残っています。それを防ぐために、私は次のことをしました：

$('#myModal').modal('show'); //display something
//...

// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide'); 
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...

// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});
15
Daniele Piccioni

Daniele Piccioni に似ていますが、もう少し簡潔です：

$('#myModal').modal({backdrop: true, keyboard: false, show: true});
$('#myModal').data('bs.modal').options.backdrop = 'static';

これがためのものです Bootstrap 3.+

参照： 変更Bootstrapモーダルオプションが既に存在する場合

6
jollyGreen

Bootstrap 4.1.1で同じ問題があり、htmlにデータ属性を追加したときにのみ機能しました

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
  style="display: block;" data-keyboard="false" data-backdrop="static">
...
3
Fernando Vieira

これを処理するには2つの方法があります。

1）データ属性をHTMLに直接追加できます-

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">

2）JQueryを使用できます（Bootstrap V4の場合）-

$("#myModal").data('bs.modal')._config.backdrop = 'static';

Bootstrap V3-

$('#myModal').data('bs.modal').options.backdrop = 'static';
1
Parikshit Sarkar

AJAXリクエストが完了している間は、モーダルのクローズを無効にしたいと思いました。

@ jollyGreen 正しい方向に進みましたが、bootstrap 4では、これを実用的に実行できる唯一の方法は、モーダルはすでにこのように表示されていました：

$("#myModal").data('bs.modal')._config.backdrop = 'static';

つまり、v3とv4の間で、bs.modalデータオブジェクトのoptionsプロパティが_configに変更されたようです。

0
DazBaldwin