(function(){ var openBtn = document.getElementById('ffOpenGForm'); var closeBtn = document.getElementById('ffCloseGForm'); var backdrop = document.getElementById('ffGFormBackdrop'); var iframe = document.getElementById('ffGFormIframe');// Ambil URL dari atribut data pada iframe var embedUrl = iframe.getAttribute('data-embed-url'); var transitionDuration = 300; // Durasi transisi (ms) harus sama dengan CSSfunction openModal() { // set src (deferred load) hanya jika belum terisi atau berbeda if (!iframe.getAttribute('src') || iframe.getAttribute('src') !== embedUrl) { iframe.setAttribute('src', embedUrl); } backdrop.style.display = 'flex'; // 1. Tampilkan display (tanpa opacity) // 2. Beri sedikit jeda (setTimeout 10ms) agar transisi CSS berjalan lancar setTimeout(function() { backdrop.classList.add('is-open'); // Tambahkan class untuk memulai transisi opacity & transform backdrop.setAttribute('aria-hidden','false'); }, 10); }function closeModal() { // 1. Hapus class 'is-open' untuk memulai transisi menutup backdrop.classList.remove('is-open'); backdrop.setAttribute('aria-hidden','true'); // 2. Tunggu hingga transisi selesai sebelum menyembunyikan display setTimeout(function() { backdrop.style.display = 'none'; // Opsi: un-load iframe untuk menghemat memori (hapus dua // untuk mengaktifkan) // iframe.setAttribute('src','about:blank'); }, transitionDuration); }// Event Listeners openBtn.addEventListener('click', openModal); closeBtn.addEventListener('click', closeModal);// Close on backdrop click backdrop.addEventListener('click', function(e){ if (e.target === backdrop) { closeModal(); } });// Close on ESC key press document.addEventListener('keydown', function(e){ // Hanya tutup jika tombol 'Escape' ditekan DAN modal sedang terbuka if (e.key === 'Escape' && backdrop.classList.contains('is-open')) { closeModal(); } }); })();