Générateur de modal CSS

Ce que couvre le CSS généré

Le code met en forme cinq classes :

• .modal-backdrop : calque fixe plein écran, fond sombre semi-transparent (rgba(17, 24, 39, .62)), grille centrée et 24 px de marge autour du panneau.
• .modal-panel : carte blanche d’une largeur de min(100%, Npx), votre rayon de coins, une ombre douce et des coins rognés.
• .modal-header : barre d’accent de 4 px à votre couleur, puis la zone de titre avec un espacement de 20 px 24 px.
• .modal-body : la zone de contenu, avec un espacement de 18 px 24 px.
• .modal-actions : une rangée de boutons alignée à droite, avec un écart de 10 px.

Structure HTML correspondante

Le CSS attend ce balisage :

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Confirmer</h2>
    </div>
    <div class="modal-body">
      <p>Voulez-vous vraiment continuer ?</p>
    </div>
    <div class="modal-actions">
      <button>Annuler</button>
      <button>Continuer</button>
    </div>
  </div>
</div>

Gardez le panneau à l’intérieur du fond : le fond est le calque fixe et le panneau est centré dedans. Pour ouvrir et fermer le modal, insérez et retirez le fond depuis le code de votre application, ou alternez son affichage.

Adaptation aux petits écrans

La largeur du panneau est plafonnée avec min(100%, Npx) : un réglage de 520 px devient donc la largeur totale de la fenêtre sur un téléphone étroit, moins les 24 px de marge du fond. La rangée d’actions reste alignée à droite et le contenu long défile avec la page. Aucune media query n’est nécessaire pour les cas courants.

Remarques et limites

Le générateur produit uniquement du CSS. Il n’inclut pas de JavaScript pour ouvrir ou fermer le modal, piéger le focus clavier ou gérer la touche Échap. Ajoutez cette logique dans votre application.

L’en-tête conserve sa barre d’accent de 4 px en permanence ; si vous n’en avez pas besoin, supprimez ou recolorez la règle dans le code copié.