document.addEventListener('click', e => { // open const openBtn = e.target.closest('[data-open-modal]'); if (openBtn) { const dlg = document.querySelector(openBtn.getAttribute('data-open-modal')); if (dlg && typeof dlg.showModal === 'function') dlg.showModal(); } // close const closeBtn = e.target.closest('[data-close-modal]'); if (closeBtn) closeBtn.closest('dialog')?.close(); });
document.addEventListener('DOMContentLoaded', () => { // open document.querySelectorAll('[data-open-modal]').forEach(btn=>{ btn.addEventListener('click', e=>{ const sel = btn.getAttribute('data-open-modal'); const dlg = document.querySelector(sel); if(!dlg) return; dlg.setAttribute('aria-modal','true'); dlg.setAttribute('role','dialog'); dlg.showModal(); dlg.querySelector('[data-close-modal]')?.focus(); }); });
// close (buttons + backdrop + Esc) document.querySelectorAll('dialog.fl-modal').forEach(dlg=>{ dlg.addEventListener('click', e=>{ const rect = dlg.getBoundingClientRect(); const clickedBackdrop = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom; if(clickedBackdrop) dlg.close(); }); dlg.addEventListener('keydown', e=>{ if(e.key === 'Escape') dlg.close(); }); dlg.querySelectorAll('[data-close-modal]').forEach(btn=>{ btn.addEventListener('click', ()=> dlg.close()); }); }); });

