モーダルは親フォームをカバーするサブフォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは、情報や対話などを提供します。デフォルトでは、他の空白領域(通常はマスクレイヤー)をクリックするとブートストラップモーダルボックスが閉じられるため、他の領域をクリックしてモーダルボックスを閉じることを禁止する方法は次のとおりです。
$('#myModal').modal({backdrop: 'static',keyboard: false});
backdrop:staticの場合、空白は閉じられません
keyboard:falseの場合、escキーボードが閉じられます。閉じられていません。
上記のコードは、モーダル ボックスを開くためにも使用されます。
次のメソッドも使用できます:
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog custom-dialog succ-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>提示信息</h4> </div> <div class="modal-body"> <div><img src="images/loading.gif"><p><span>投标成功!</span><img src="images/success.png"></p></div> </div> </div> </div> </div>
ここでの data-backdrop="static" は静的な背景を指定しており、ユーザーがモーダル ボックスの外側をクリックしてもモーダル ボックスは閉じません。データ キーボードは、エスケープ キーが押されたときにモーダル ボックスを閉じることを指します。 false に設定すると、キーは無効になります。