ブートストラップ モーダル ボックスのネストと tabindex 属性の詳細な説明

この記事では主にブートストラップのモーダルボックスのネスト、tabindex属性、影の削除について紹介しますので、困っている方は参考にしていただければ幸いです。

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

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

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

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

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

tabindex

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

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

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

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

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

.modal-backdrop のスタイルは次のとおりです:

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

シャド​​ウ レイヤーを削除する必要がある場合は、CSS スタイルを設定することができます

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

または js を通じて制御することができます

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

:

BootStrapモーダルボックスが垂直センタリングを解決する方法

AJAXとSpringMVCブートストラップモーダルボックスのページングクエリ機能の詳細説明

BootStrapモーダルボックス時に入力がフォーカスを取得できない問題を完全に解決とselect2を併用します

以上がブートストラップ モーダル ボックスのネストと tabindex 属性の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。