Comprendre les modaux bootstrap

Boîte modale bootstrap: Fenêtre contextuelle légère et personnalisable

Bootstrap Modal Box est un plug-in de bootstrap jQuery léger, personnalisable et réactif pour afficher des fenêtres d'alerte, des vidéos, des images, etc. Il est divisé en trois parties: le titre, le corps et le pied de page, chacun avec sa fonction unique. Il n'est pas nécessaire d'écrire du code JavaScript, car tous les code et styles sont prédéfinis par bootstrap.

Caractéristiques de clé:

• léger et réactif: La boîte modale est conçue avec un simple et bien affiché sur tous les appareils.
• hautement personnalisable: Vous pouvez facilement redimensionner, ajouter du contenu dynamique et même le faire défiler.
• Aucun code JavaScript requis: bootstrap prédéfini tous les code et styles nécessaires.
• Prise en charge de l'événement riche: Vous pouvez utiliser la méthode de jQuery .on() pour lier divers événements, tels que show.bs.modal, shown.bs.modal, hide.bs.modal, et hidden.bs.modal, pour réaliser une plus granularité contrôle.
• peut empêcher les clics externes de fermer: en définissant l'option backdrop à 'static', vous pouvez empêcher les utilisateurs de cliquer à l'extérieur de la boîte modale pour le fermer.

Structure modale de la boîte:

La boîte modale bootstrap par défaut est la suivante:

Déclencher la boîte modale:

Vous pouvez utiliser un lien ou un bouton pour déclencher une boîte modale. Le marqueur de l'élément de déclenchement peut ressembler à ceci:

<code class="language-html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a></code>

Notez que l'élément de liaison possède deux propriétés de données personnalisées: data-toggle et data-target. data-toggle Dites à Bootstrap quoi faire, data-target Dites à bootstrap quel élément s'ouvrir. Par conséquent, chaque fois qu'un tel lien est cliqué, une boîte modale avec ID "BasicModal" apparaît.

Code de boîte modale:

Voici les marques nécessaires pour définir la boîte modale elle-même:

<code class="language-html"><div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div></code>

Le div parent de la boîte modale doit être le même que l'ID utilisé dans l'élément de déclenchement ci-dessus. Dans ce cas, c'est https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal. Les propriétés aria-labelledby et aria-hidden sont utilisées pour l'accessibilité et sont recommandées pour être conservées.

Ajustez la taille de la boîte modale:

Vous pouvez modifier la taille de la boîte modale en ajoutant une classe de modificateur à la .modal-dialog div: modal-lg (grande boîte modale) ou modal-sm (petite boîte modale).

Utilisez jQuery pour activer la boîte modale:

Vous pouvez utiliser la fonction .modal() de jQuery pour contrôler la boîte modale:

<code class="language-html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a></code>

options est un objet JavaScript utilisé pour personnaliser les comportements, tels que:

<code class="language-html"><div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div></code>

Les autres options disponibles sont: keyboard, show et focus.

Bootstrap Modal Box Event:

Vous pouvez utiliser la méthode .on() de jQuery pour lier divers événements pour personnaliser davantage le comportement de la boîte modale bootstrap.

Résumé:

Bootstrap Modal Box est l'un des meilleurs plugins fournis par Bootstrap. Pour les concepteurs débutants, c'est l'une des meilleures façons de charger du contenu dans une fenêtre contextuelle sans écrire de code JavaScript.

(Ce qui suit est la partie FAQ, qui a été réécrite et rationalisée selon le texte d'origine)

FAQ:

• Quel est le but de la boîte modale bootstrap? est utilisé pour créer des informations d'affichage pop-up sans que l'utilisateur ne quitte la page actuelle.

• Comment utiliser JavaScript pour déclencher des boîtes modales bootstrap? Utilisez la méthode .modal('show'), telle que $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');.

• Comment fermer la boîte modale bootstrap à l'aide de JavaScript? Utilisez la méthode .modal('hide'), telle que $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('hide');.

• Comment personnaliser l'apparence de la boîte modale bootstrap? Vous pouvez utiliser des noms de classe (tels que .modal-lg, .modal-sm, des classes de couleur bootstrap) pour personnaliser.

• peut-il être utilisé plusieurs boîtes modales sur la même page? Oui, mais un seul peut être affiché à la fois.

• Comment ajouter l'animation à la boîte modale bootstrap? Vous pouvez utiliser des bibliothèques CSS ou JavaScript (comme Animate.css).

• Comment charger le contenu dynamique dans la boîte modale bootstrap? ajax est disponible.

• Comment faire défiler la boîte modale bootstrap? Utilisez la classe .modal-dialog-scrollable.

• Comment empêcher les utilisateurs de cliquer sur externe pour fermer la boîte modale bootstrap? Définissez l'option backdrop sur 'static'.

• Les boîtes modales bootstrap prennent-elles les appareils mobiles? soutenu et réactif.

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!