Maison >interface Web >Tutoriel d'amorçage >Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de l'utilisation des composants modaux

Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de l'utilisation des composants modaux

青灯夜游
青灯夜游avant
2021-12-06 19:00:392392parcourir

Comment utiliser la boîte modale dans

Bootstrap ? L'article suivant vous présentera l'utilisation du composant Modal de la boîte contextuelle modale Bootstrap5. J'espère qu'il vous sera utile !

Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de l'utilisation des composants modaux

1 Comment fonctionnent les pop-ups modaux Bootstrap 5

Utilisez le plugin modal JavaScript de Bootstrap pour ajouter des boîtes de dialogue à votre site pour les lightbox, les notifications utilisateur ou le contenu entièrement personnalisé. [Recommandation associée : "Tutoriel bootstrap"]

  • La fenêtre interactive est construite avec HTML, CSS et JavaScript. Ils se trouvent au-dessus de tout autre contenu du fichier et suppriment le défilement du corps afin que le contenu de la fenêtre interactive défile.
  • Cliquer sur la « toile de fond » de la fenêtre interactive fermera automatiquement la fenêtre interactive.
  • Bootstrap ne prend en charge qu'une seule fenêtre interactive à la fois. Les fenêtres interactives imbriquées ne sont pas prises en charge car nous considérons les fenêtres interactives imbriquées comme une mauvaise expérience utilisateur.
  • La fenêtre interactive utilise position:fixe, ce qui est un peu particulier en termes de rendu et de présentation. Placez votre fenêtre HTML interactive au niveau supérieur autant que possible pour éviter les interférences potentielles d'autres éléments. Vous pouvez rencontrer des problèmes lors de l'ajout d'un .modal à l'intérieur d'un autre élément fixe.
  • En raison de la position : corrigée, il existe des instructions supplémentaires pour utiliser les fenêtres interactives sur les appareils mobiles.
  • Selon la façon dont HTML5 définit la sémantique, l'attribut HTML autofocus n'a aucun impact sur les fenêtres interactives Bootstrap. Pour obtenir le même effet, utilisez du JavaScript personnalisé : l'attribut HTML autofocus

2 Exemple complet

2.1 Exemple complet

Basculez le rendu dynamique de la fenêtre d'affichage en cliquant sur le bouton ci-dessous. Il glissera du haut de la page et apparaîtra en fondu. Cliquez sur le bouton de fermeture ou cliquez sur la zone d'arrière-plan pour fermer la fenêtre contextuelle.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>模态框</title>
  </head>
  <body>
    <div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    删除内容
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div>
    <div>
    <div>
      <h5 id="exampleModalLabel">确认提示</h5>
      <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div>
      删除后不可恢复!
    </div>
    <div>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary">继续删除</button>
    </div>
    </div>
    </div>
    </div>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de lutilisation des composants modaux

2.2 Fond statique

Lorsque l'arrière-plan est défini sur statique, la fenêtre interactive ne se fermera pas en cliquant sur l'arrière-plan. Ajoutez simplement data-bs-backdrop="static" data-bs-keyboard="false" à

Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de lutilisation des composants modaux

3.2 Utilisez la barre de défilement contextuelle

Vous pouvez ajouter modal-dialog-scrollable à modal-dialog pour créer une fenêtre contextuelle avec un corps déroulant.

Remplacez Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de lutilisation des composants modauxrrreee

par

rrreee dans l'exemple 26.3.1 png" alt="Comment utiliser les boîtes modales dans Bootstrap ? Une brève analyse de lutilisation des composants modaux"/>

4 Centré verticalement🎜Ajoutez modal -dialog-centered à modal-dialog pour centrer verticalement la fenêtre interactive. Cette configuration est relativement simple, apportez simplement les modifications suivantes. 🎜rrreee🎜Celui du bas est avec une barre de défilement🎜rrreee🎜L'exemple ci-dessus peut ne pas être visible car seule une partie de la fenêtre est sélectionnée dans la capture d'écran. Les deux images suivantes sont 26.2.1 pour démontrer l'effet d'affichage après avoir relevé la fenêtre. et Effet d'affichage après avoir ajouté le centrage vertical. 🎜🎜🎜🎜🎜🎜🎜🎜5 Commutation de plusieurs boîtes modales 🎜🎜 Basculez entre plusieurs modaux, en plaçant intelligemment les attributs data-bs-target et data-bs-Toggle. Par exemple, vous pouvez basculer en mode de réinitialisation du mot de passe dans un mode de connexion ouvert. Veuillez noter que plusieurs modaux ne peuvent pas être ouverts en même temps. Cette méthode bascule simplement entre deux modalités distinctes. 🎜rrreee🎜🎜🎜🎜Pour plus de connaissances sur le bootstrap, veuillez visiter : 🎜tutoriel de base du bootstrap🎜 ! ! 🎜

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!

JavaScript html5 css bootstrap html Static class position
Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent:Comment ajouter une liste dans Bootstrap ? Une brève analyse de l'utilisation des groupes de listesArticle suivant:Comment ajouter une liste dans Bootstrap ? Une brève analyse de l'utilisation des groupes de listes

Articles Liés

Voir plus