Explication détaillée de l'imbrication de la boîte modale bootstrap et des attributs tabindex

Cet article présente principalement l'imbrication de boîtes modales bootstrap, les attributs tabindex et la suppression des ombres. J'espère que cela pourra aider tout le monde.

Imbrication de boîtes modales

Au cours du développement, j'ai rencontré le besoin de déclencher la première boîte modale via un événement de clic. Après le déclenchement, la deuxième boîte modale a été évoquée via l'événement, et l'événement a été évoqué. déclenché. Déclenchez la troisième boîte modale ; c'est-à-dire que la boîte modale est imbriquée.

L'imbrication de la boîte modale nécessite une boîte modale pour envelopper la boîte modale imbriquée impliquée, afin que la boîte modale ne soit pas gâchée lorsque vous cliquez dessus.

Le code HTML est le suivant :

<!--最外层包裹的模态框-->
<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

L'explication de l'attribut tabindex dans la boîte modale w3c est : l'attribut tabindex spécifie le contrôle de la touche de tabulation ordre de l'élément (lorsque la touche de tabulation est utilisée pour la navigation). L'attribut tabindex est disponible dans presque tous les navigateurs à l'exception de Safari.

Dans la boîte modale imbriquée, lorsque l'attribut existe, quelle que soit la valeur, la touche retour (Esc) du clavier fonctionnera lorsqu'elle n'existe pas, la touche retour (Esc) ne fonctionnera pas ; travail.

Supprimer l'ombre de la boîte modale

Lorsque la boîte modale est déclenchée, un calque d'ombre sera généré pour couvrir toute la page.

Le calque d'ombre est contrôlé par une classe nommée .modal-backdrop. Le style de

.modal-backdrop dans le code source de bootsrap est le suivant :

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

Lorsque vous devez supprimer le calque d'ombre, vous pouvez définir le style CSS correspondant

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

ou utilisez js Control

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

Recommandations associées :

Comment résoudre le problème selon lequel la boîte modale BootStrap n'est pas centrée verticalement

Implémentation d'AJAX et SpringMVC Explication détaillée de la fonction de requête de pagination de la boîte modale d'amorçage

Résoudre parfaitement le problème selon lequel l'entrée ne peut pas obtenir le focus lorsque le La boîte modale BootStrap et select2 sont utilisés ensemble

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!