https://www.responsible.ai/wp-content/themes/rai-theme/assets/src/js/consultation-modal.js

1/**
2 * Consultation Modal Handler
3 *
4 * Opens modal when clicking elements with data-modal="consultation".
5 * Closes on backdrop click, close button, or Escape key.
6 */
7document.addEventListener('DOMContentLoaded', function() {
8    const modal = document.getElementById('consultation-modal');
9    if (!modal) return;
10
11    // Open modal - any element with data-modal="consultation"
12    document.addEventListener('click', function(e) {
13        const trigger = e.target.closest('[data-modal="consultation"]');
14        if (trigger) {
15            e.preventDefault();
16            modal.classList.remove('hidden');
17            document.body.style.overflow = 'hidden';
18
19            // Focus first focusable element for accessibility
20            const focusable = modal.querySelector('button, input, select, textarea');
21            if (focusable) focusable.focus();
22        }
23    });
24
25    // Close modal - backdrop click or close button
26    modal.addEventListener('click', function(e) {
27        if (e.target.hasAttribute('data-modal-close')) {
28            closeModal();
29        }
30    });
31
32    // Close on Escape key
33    document.addEventListener('keydown', function(e) {
34        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
35            closeModal();
36        }
37    });
38
39    function closeModal() {
40        modal.classList.add('hidden');
41        document.body.style.overflow = '';
42    }
43});