Intégration des boites de dialogues modales (v4.9.9+)

A partir de la version 4.9.9

À partir de la version 4.9.9, Ametys fournit un helper JavaScript :
AmetysFront.Dialog, permettant d’ouvrir facilement des boîtes de dialogue modales.

Pré-requis CSS

Ce helper nécessite l’ajout d’un minimum de styles pour garantir une boîte de dialogue lisible.

Ajoutez au moins les règles suivantes dans une feuille CSS/SCSS chargée sur toutes les pages concernées :

.ametys-dialog {   
    &-document {
      color: #000; // couleur du texte
      font-family: "Trebuchet MS", arial, sans-serif; // police
      background: #fff; // fond pour assurer la lisibilité
      padding: 20px;
    }
}

Ces styles assurent un rendu de base correct.

Personnalisation (optionnel)

Vous pouvez bien sur aller plus loin dans la personnalisation, par exemple:

.ametys-dialog {
  z-index: 1200; /* pour passer au-dessus d'éléments comme un menu sticky */
    
    &-document {
        color: inherit;
        font-family: inherit;
       padding: 20px;
      max-width: 70vh; /* largeur maximale = 70% de l'écran */
        background: #fff;
      border-radius: 10px; /* ajout un border-radius */
     
     @media (max-width: 600px) {
             max-width: 90wh; 
     }     
    }
    
    &-overlay {
      background-color: rgba(0, 0, 0, 0.4); /* personnalisation de l'overlay */
  } 
}

Structure HTML générée

Toute boîte de dialogue créée via ce helper respecte la structure suivante :

<div id="my-dialog" class="my-dialog ametys-dialog">
 <div class="ametys-dialog-overlay" data-ametys-dialog-close="true"></div>
   <div class="ametys-dialog-document" role="document">
   <!-- Contenu de la dialogue -->
 </div>
</div>

Styles fournis par le noyau

Ametys applique déjà des styles de base suivant:

@layer ametys-dialog {
    .ametys-dialog {
      position: fixed;
      inset: 0;
      z-index: 1001;
      display: flex;
      align-items: center;     
      justify-content: center;
      
      &:not(.ametys-dialog-open) {
          display: none;
      }
    
      &-document {
        position: relative;
        overflow-y: auto;
        max-width: 95svw;
        max-height: 95svh;
      }
            
      &-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
      }
    }
}
Retour en haut

Manuel de paramétrage et d'intégration