Cliquer ici pour télécharger le code complet
data-bs-target="#modalId"
data-bs-toggle="modal"
au bouton..modal
et inclure l’attribut de données data-bs-backdrop=”static”.modal-dialog
à l’enfant immédiat du conteneur modal..modal-content
à l’enfant immédiat de l’élément (<div>) ayant .modal-dialog
..modal-content
se compose d’un en-tête, d’un corps et d’un pied de page modaux..modal-header.
.modal-title
..btn-close
.data-bs-dismiss="modal"
au bouton..modal-body
.modal-footer
et il se compose d’un bouton de fermeture et d’autres liens.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Ouvrir modal
</button>
data-bs-toggle
=”modal” est utilisé pour identifier le bouton en tant que composant modal.data-bs-target
= “#Modal1”, qui est un identifiant qui doit être unique. Ce même ID doit être utilisé dans le composant modal..modal
identifie le contenu de <div>
comme un modal et y met l’accent.modal
:".modal"
.fade
:".fade"
est utilisée pour le fondu de la boîte modale qui est facultative..fade
sur l’élément .modal ajoute un effet d’animation de fondu et de glissement lors de l’affichage et du masquage de la fenêtre modale. tabindex
:tabindex
définit explicitement l’ordre de navigation des éléments pouvant être sélectionnés (généralement des liens et des contrôles de formulaire) dans une page. Il peut également être utilisé pour définir si les éléments doivent être focalisables ou non.tabindex
est associé à HTML , il n’est pas spécifique à Bootstrap.tabindex = "0"
à un élément, cela signifie qu’il est accessible par la navigation au clavier, mais l’ordre est défini par l’ordre des sources des documents.tabindex (par exemple tabindex = "1", tabindex = "2")
, ces éléments sont accessibles par navigation au clavier et l’ordre est défini par la valeur de l’attribut. tabindex="-1"
), cela signifie que l’élément n’est pas accessible par la navigation au clavier, mais peut être ciblé à l’aide de la fonction focus dans JS.aria-labelledby
: Identifie l’élément (ou les éléments) qui étiquette l’élément courant.aria-hidden (state)
: Indique que l’élément et tous ses descendants ne sont visibles ou perceptibles par aucun utilisateur tel qu’implémenté par l’auteur.modal-dialog
:.modal-dialog
“..modal-dialog
définit la largeur ainsi que l’alignement horizontal et vertical de la boîte modale. .modal-dialog-centered
de l’élément .modal-dialog est utilisée pour centrer verticalement le modal.modal-content
:.modal-content
définit les styles tels que la couleur du texte et de l’arrière-plan, les bordures, les coins arrondis, etc..modal-content
“..modal-header
:.modal-header
définit un en-tête pour le modal qui contient généralement un titre modal et un bouton de fermeture..modal-header
” qui comporte deux composants : .modal-title
” et est utilisé pour ajouter un en-tête à la fenêtre contextuelle modale.data-bs-dismiss="modal"
permet de spécifier à n’importe quel élément dans une fenêtre modal de fermer la fenêtre en question.modal-body
:.modal-body
contient le contenu réel comme du texte, des images, des formulaires, etc.
modal-footer
:.modal-footer
définit le pied de page qui contient généralement des boutons d’action pour l’utilisateur..modal-sm
, .modal-lg
et .modal-xl
une classe , respectivement sur le .modal-dialog..modal-dialog
..modal-sm
qui mesure 300px, .modal-lg
qui mesure 800px ou .modal-xl
qui mesure 1140px