ブートストラップモーダルボックスの入れ子、tabindex属性、影の削除方法

モーダル ボックスのネスト

開発中に、クリック イベントを通じて最初のモーダル ボックスをトリガーする必要が生じました。トリガー後、2 番目のモーダル ボックスがイベントを通じて呼び出され、3 番目のモーダル ボックスがイベントを通じてトリガーされます。イベント。モーダル ボックス、つまりネストされたモーダル ボックス。

モーダル ボックスをネストするには、関連するネストされたモーダル ボックスをラップするモーダル ボックスが必要です。これにより、クリックされたときにモーダル ボックスが乱雑にならないようになります。

HTML コードは次のとおりです:

<!--最外层包裹的模态框-->
<div class="modal  fade" id="outermost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
　　<!--第一个模态框--> 
　　<div class="modal-dialog modalWith firstModal" id="productModal" role="document"></div>  
　　<!--第二个模态框--> 
　　<div class="modal" tabindex="-1" role="dialog" id="addproduct" aria-labelledby="myModalLabel"></div> 
　
　　<!--第三个模态框--> 
　　<div class="modal" tabindex="-1" role="dialog" id="selectProduct" aria-labelledby="myModalLabel"></div> 
</div>

tabindex

モーダル ボックス内の tabindex 属性の w3c 説明は次のとおりです: tabindex 属性は要素のタブ キーの制御順序を指定します (タブ キーがナビゲーションに使用されます）。 Safari を除くほとんどすべてのブラウザには tabindex 属性があります。

ネストされたモーダル ボックスでは、属性が存在する場合、値が何であっても、キーボードのリターン キー (Esc) は機能しますが、属性が存在しない場合は、リターン キー (Esc) は機能しません。

モーダルボックスに付属の影を削除します

モーダルボックスがトリガーされると、ページ全体を覆う影レイヤーが生成されます。

シャドウレイヤーは、.modal-backdropという名前のクラスによって制御されます。

.modal-backdrop bootsrap ソースコードのスタイルは次のとおりです:

.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

シャドウレイヤーを削除する必要がある場合は、それにCSSスタイルを設定

1 .modal-backdrop {
2   filter: alpha(opacity=0)!important;
3   opacity: 0!important;
4 }

するか制御できます。 jsを通して

1 $(".modal-backdrop").remove();

以上がブートストラップモーダルボックスの入れ子、tabindex属性、影の削除方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。