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:

<a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">點(diǎn)擊打開(kāi)模態(tài)框</a>

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:

<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">基本模態(tài)框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模態(tài)框主體</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

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 http://www.miracleart.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:

<a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">點(diǎn)擊打開(kāi)模態(tài)框</a>

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

<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">基本模態(tài)框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模態(tài)框主體</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

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 $('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');.

• Comment fermer la bo?te modale bootstrap à l'aide de JavaScript? Utilisez la méthode .modal('hide'), telle que $('http://www.miracleart.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!