Dans bootstrap, modal fait référence à une « boîte modale », qui est un sous-formulaire couvrant le formulaire parent ; son but est d'afficher le contenu d'une source distincte sans quitter le formulaire parent. Les boîtes modales peuvent ajouter des invites et des interactions accrocheuses au site Web pour les notifications des utilisateurs, les interactions des visiteurs, les alertes de message ou les interactions de contenu personnalisées.
L'environnement d'exploitation de ce tutoriel : système Windows 7, bootsrap version 3.3.7, ordinateur DELL G3
Modal est un formulaire enfant recouvrant le formulaire parent. En règle générale, le but est d'afficher du contenu provenant d'une source distincte pouvant avoir une certaine interaction sans quitter le formulaire parent. Les sous-formulaires fournissent des informations, des interactions et bien plus encore.
Style de boîte modale contextuelle Bootstrap
Utilisez le plug-in de boîte modale JavaScript de Bootstrap pour ajouter des invites et des interactions accrocheuses à votre site Web pour les notifications des utilisateurs, les interactions des visiteurs, les alertes de message ou les interactions de contenu personnalisées.
Fermez la boîte modale :
Cliquez sur
Principe de fonctionnement
Les modaux contextuels sont construits avec HTML, CSS et Javascript. Ils se trouvent au-dessus d'autres éléments de présentation dans le. documentez et supprimez les événements de défilement du afin que le contenu du modal lui-même puisse défiler.
Cliquez sur la "toile de fond" (zone de fond gris) de la boîte modale pour fermer automatiquement la boîte du module dynamique.
Bootstrap ne prend en charge qu'une seule fenêtre modale à la fois et ne prend pas en charge les modes imbriqués, car la superposition entraînera une mauvaise expérience utilisateur.
La boîte modale utilise la position : fixe, ce qui est très différent des autres éléments de présentation. Veuillez placer le HTML de la boîte modale pop-up au niveau supérieur autant que possible pour éviter les interférences d'autres éléments. Surtout lorsque l'événement .modal est également défini dans un autre élément fixe, vous pouvez rencontrer des problèmes.
Il est également affecté par l'attribut position : fixe. Il existe quelques précautions lors de l'utilisation des boîtes modales sur les appareils mobiles.
Selon la définition sémantique de HTML5, l'attribut autofocusHTML n'a aucun effet sur la boîte modale Bootstrap. Pour obtenir le même effet, vous devez utiliser du JavaScript.
Boîte modale normale
.modal : Le conteneur le plus externe de la boîte modale.
.modal-dialog : Conteneur de boîte modale.
.modal-content : placez le contenu de la boîte modale et définissez le style de la boîte modale.
.modal-header : en-tête de boîte modale.
.modal-title : titre de la boîte modale.
.modal-body : Le contenu principal de la boîte modale.
.modal-footer : contenu du pied de page de la boîte modale.
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通的模态框</button>
</div>
</div>
</div>
Copier après la connexion
Boîtes modales avec barres de défilement
Lorsque la fenêtre d'affichage de l'utilisateur (zone de contenu contextuel) ou la modale de l'appareil devient plus longue, elles feront automatiquement défiler la page.
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">有滚动条的模态框</button>
</div>
</div>
</div>
Copier après la connexion
Modal centré verticalement
Ajoutez .modal-dialog-centered à la boîte de dialogue .modal-dialog pour centrer verticalement le modal.
Ajoutez le système de grille .container-fluid à .modal-body, vous pouvez utiliser le système de grille Bootsrap dans les fenêtres dynamiques et l'utiliser normalement n'importe où La définition de la classe du système de grille.
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
Principe de fonctionnement
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
