Modal Glassmorphism

Một cửa sổ phương thức hiện đại cho phép nhìn xuyên qua nền như kính mờ.

Xem trước

Trường hợp sử dụng & Tính năng

Khuyến mãi và cảnh báo: Hoàn hảo cho các tin nhắn quan trọng thực sự thu hút sự chú ý của người dùng hoặc cửa sổ bật lên yêu cầu hành động.
Hình ảnh hiện đại: Làm mờ nền (hình thái thủy tinh) để làm nổi bật nội dung tiền cảnh trong khi vẫn giữ nguyên bối cảnh nền.
Tạo cảm giác sang trọng: Mang lại cảm giác về chiều sâu và trong suốt, mang lại ấn tượng tinh tế hơn so với nền đồng màu đơn giản.

Những điểm chính của thiết kế và UX (Design & UX)

Làm mờ phông nền: Sử dụng tiện ích backdrop-blur của Tailwind CSS để làm mờ các thành phần nền một cách đẹp mắt.
Đường viền và độ trong suốt: Bằng cách kết hợp màu nền và đường viền mờ, chẳng hạn như bg-white/20 và border-white/30, một kết cấu thủy tinh chân thực sẽ được thể hiện.
Đã thêm hoạt ảnh: Khi phương thức được hiển thị, hoạt ảnh mờ dần và tăng tỷ lệ nhẹ sẽ được thêm vào để tạo giao diện tự nhiên hơn.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

Độ bền của kính mờ: Bạn có thể điều chỉnh độ mờ bằng cách thay đổi lớp backdrop-blur-md hoặc backdrop-blur-xl.
Thay đổi chủ đề màu: Bằng cách thay đổi màu lớp phủ nền (bg-black/20) hoặc màu cơ bản của chính phương thức, bạn có thể kết hợp nó với chủ đề tối hoặc màu thương hiệu.

Mã triển khai (Implementation)

<!-- 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>