Bootstrapモーダルボックスの使い方を詳しく解説

モーダ​​ルは親フォームをカバーするサブフォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは情報や対話などを提供します。デフォルトでは、他の空白領域（通常はマスクレイヤー）をクリックするとブートストラップモーダルボックスが閉じられるため、他の領域をクリックしてモーダルボックスを閉じることを禁止する方法は次のとおりです。

$('#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 に設定すると、キーは無効になります。

以上がBootstrapモーダルボックスの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。