ホームページ  >  記事  >  php教程  >  ブートストラップ モーダル ボックスにより、空白スペースをクリックして閉じることができなくなります

ブートストラップ モーダル ボックスにより、空白スペースをクリックして閉じることができなくなります

高洛峰
高洛峰オリジナル
2016-12-09 14:32:131423ブラウズ

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

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


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。