Comment créer un modal Bootstrap 5 ?

• Commencez par la création d’un bouton qui sert à afficher votre modal.
• Attribuez l’identifiant modal à l’attribut de données du bouton data-bs-target="#modalId"
• Ajoutez un autre attribut de données data-bs-toggle="modal" au bouton.

• La classe .modal-header.
• Le titre du modèle est défini par la classe .modal-title.
• Mettez le bouton de fermeture dans l’en-tête modal et attribuez la classe .btn-close.
• Ajoutez un attribut de données data-bs-dismiss="modal" au bouton.

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
     Ouvrir modal
  </button>

• L’attribut data-bs-toggle= »modal » est utilisé pour identifier le bouton en tant que composant modal.
• Vient ensuite le data-bs-target = « #Modal1 », qui est un identifiant qui doit être unique. Ce même ID doit être utilisé dans le composant modal.

• modal:
• Le div externe doit avoir une classe CSS "​​.modal".
• fade:
• La classe supplémentaire ".fade" est utilisée pour le fondu de la boîte modale qui est facultative.
• La classe .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.
• Si vous voulez que le modal apparaisse simplement sans aucun effet, vous pouvez simplement supprimer cette classe.





• L’ID doit être identique à la valeur d’ID définie pour le composant de bouton. Identique à la valeur de l’attribut data-bs-target utilisé pour déclencher le modal
• Assurez-vous d’ajouter d’autres attributs tels que:
• tabindex:
• L’attribut 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.
• L’ attribut tabindex est associé à HTML , il n’est pas spécifique à Bootstrap.
• Il est chargée d’indiquer si un élément est accessible par la navigation au clavier.
• Il peut avoir trois scénarios différents :
• Lors de l’ajout 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.
• Lors de l’ ajout d’une valeur positive à l’attribut 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.
• Lorsque vous ajoutez une valeur négative à tabindex (généralement 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:
• Le contenu modal doit être ajouté dans des balises identifiées avec la classe « .modal-dialog« .
• La classe .modal-dialog définit la largeur ainsi que l’alignement horizontal et vertical de la boîte modale.
• La classe .modal-dialog-centered de l’élément .modal-dialog est utilisée pour centrer verticalement le modal.
• modal-content:
• La classe .modal-content définit les styles tels que la couleur du texte et de l’arrière-plan, les bordures, les coins arrondis, etc.
• Toutes les parties du modal doivent être enveloppées dans un avec la classe « .modal-content« .
• .modal-header:
• La classe .modal-header définit un en-tête pour le modal qui contient généralement un titre modal et un bouton de fermeture.
• La section d’en-tête est identifiée par la classe « .modal-header » qui comporte deux composants :
• Le titre et le bouton. Le composant de titre utilise la classe « .modal-title » et est utilisé pour ajouter un en-tête à la fenêtre contextuelle modale.
• Les composants du bouton sont utilisés pour inclure l’icône de fermeture (X) pour fermer la boîte de dialogue modale.
• L’attribut 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:
• La classe .modal-body contient le contenu réel comme du texte, des images, des formulaires, etc.
• modal-footer:
• La classe .modal-footer définit le pied de page qui contient généralement des boutons d’action pour l’utilisateur.
• La section pied de page contient généralement deux boutons: Un pour la fermeture et un autre pour l’enregistrement.