templates/includes/popup.html.twig line 1

Open in your IDE?
  1. <!-- Le modal -->
  2. <div id="myModal" class="modal">
  3.     <div class="modal-content">
  4.         <span class="closepopup">&times;</span>
  5.         <p>{{ message_popup }}</p> <!-- Message dynamique -->
  6.     </div>
  8. </div>
  11. <style>
  12.     .modal {
  13.         display: none; /* Cacher le popup par défaut */
  14.         position: fixed;
  15.         z-index: 1;
  16.         left: 0;
  17.         top: 0;
  18.         width: 100%;
  19.         height: 100%;
  20.         background-color: rgba(0, 0, 0, 0.4);
  21.     }
  23.     .modal-content {
  24.         background-color: #ffffff;
  25.         margin: 10% auto;
  26.         padding: 20px;
  27.         border: none;
  28.         border-radius: 10px; /* Coins arrondis */
  29.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
  30.         width: 60%; /* Réduire la largeur pour un aspect plus élégant */
  31.         font-family: 'Arial', sans-serif; /* Police propre */
  32.         line-height: 1.6; /* Améliorer la lisibilité */
  33.     }
  34.     
  35.     .closepopup {
  36.         color: #666;
  37.         float: right;
  38.         font-size: 24px;
  39.         font-weight: normal;
  40.         transition: color 0.3s ease; /* Animation pour le changement de couleur */
  41.     }
  42.     
  43.     .closepopup:hover,
  44.     .closepopup:focus {
  45.         color: #333; /* Couleur plus subtile que le noir */
  46.         text-decoration: none;
  47.         cursor: pointer;
  48.     }
  49. </style>