Imbrication de boîte modale Bootstrap, attribut tabindex, méthode de suppression de l'ombre

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, puis d'appeler la troisième boîte modale via l'événement après le déclenchement. Deux boîtes modales et déclenchez la troisième boîte modale via des événements, c'est-à-dire des boîtes modales imbriquées.

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 :

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

Explication de l'attribut tabindex w3c en modal box Oui : L'attribut tabindex spécifie l'ordre de contrôle de la touche de tabulation 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.

Supprimez l'ombre fournie avec la boîte modale

Lorsque la boîte modale est déclenchée, une superposition de calque d'ombre sera généré la page entière.

Le calque d'ombre est représenté par une classe nommée .modal-backdrop Contrôlez l'affichage.

.modal-backdrop Le style 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;
}

Vous pouvez l'utiliser lorsque vous devez supprimer le calque d'ombre Définir le style CSS

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

ou le contrôler via js

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

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!