Modale Glassmorphism

Une fenêtre modale moderne qui permet de voir l’arrière-plan à travers comme du verre dépoli.

Aperçu

Cas d’utilisation et fonctionnalités

Promotions et alertes : parfait pour les messages importants qui attirent vraiment l’attention de l’utilisateur ou les fenêtres contextuelles qui nécessitent une action.
Visuels modernes : floutez l’arrière-plan (glassmorphisme) pour mettre en valeur le contenu du premier plan tout en préservant le contexte de l’arrière-plan.
Produit une sensation de luxe : donne une impression de profondeur et de transparence, donnant une impression plus sophistiquée qu’un simple fond de couleur unie.

Points clés du design et de l’UX (Design & UX)

Backdrop Blur : utilise l’utilitaire backdrop-blur de Tailwind CSS pour flouter magnifiquement les éléments d’arrière-plan.
Bordure et transparence : En combinant une couleur d’arrière-plan et une bordure translucides, telles que « bg-white/20 » et « border-white/30 », une texture de verre réaliste est exprimée.
Animation ajoutée : lorsque le modal est affiché, une animation de fondu entrant et une légère mise à l’échelle est ajoutée pour créer une apparence plus naturelle.

Comment personnaliser (Guide de personnalisation)

Force du verre givré : Vous pouvez ajuster la force du flou en modifiant la classe backdrop-blur-md ou backdrop-blur-xl.
Changement du thème de couleur : En changeant la couleur de superposition d’arrière-plan (bg-black/20) ou la couleur de base du modal lui-même, vous pouvez l’associer au thème sombre ou à la couleur de la marque.

Code d’implémentation (Implémentation)

<!-- Container with background to demonstrate glass effect -->
<div class="relative w-full h-screen bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
<button id="open-modal" class="px-6 py-2 bg-white/20 hover:bg-white/30 backdrop-blur-md text-white font-medium rounded-lg border border-white/30 transition-all">Open Modal</button>

<div id="glass-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300">
  <!-- Overlay -->
  <div class="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
  
  <!-- Modal Box -->
  <div class="relative bg-white/20 dark:bg-black/30 backdrop-blur-xl border border-white/30 dark:border-white/10 rounded-2xl p-8 max-w-sm w-full shadow-2xl transform scale-95 transition-transform duration-300">
    <h3 class="text-xl font-bold text-white mb-2">Glassmorphism</h3>
    <p class="text-white/80 mb-6 text-sm">This is a beautiful glassmorphism modal popup using Tailwind CSS backdrop-blur utilities.</p>
    <button id="close-modal" class="w-full py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition-colors font-medium border border-white/20">Close</button>
  </div>
</div>
</div>
<script>
const modal = document.getElementById('glass-modal');
const inner = modal.querySelector('.transform');

document.getElementById('open-modal').addEventListener('click', () => {
  modal.classList.remove('opacity-0', 'pointer-events-none');
  inner.classList.remove('scale-95');
  inner.classList.add('scale-100');
});

document.getElementById('close-modal').addEventListener('click', () => {
  modal.classList.add('opacity-0', 'pointer-events-none');
  inner.classList.add('scale-95');
  inner.classList.remove('scale-100');
});
</script>