Maison > interface Web > tutoriel CSS > le corps du texte

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

一个新手
Libérer: 2017-10-18 09:39:19
original
3016 Les gens l'ont consulté

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>
Copier après la connexion

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;
}
Copier après la connexion

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 }
Copier après la connexion

ou le contrôler via js


1 $(".modal-backdrop").remove();
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal