https://colombia.co/sites/default/files/js/optimized/js_w6WZ9T6QjE…gxt_QQ69Hlkf9o_ys4EWLVGOgu20I1wzo.js?tm7hw2

1/**
2 * Modals.
3 */
4
5const modals = () => {
6    /** DOM Elements. */
7    const modalMain = document.querySelector('#wrapper-modal');
8    const modalContainer = document.querySelector('.modal-container');
9    const modalExit = document.querySelector('.modal-close');
10    const modalContent = document.querySelector('.inner-content');
11
12    /** Hide the modal. */
13    const hideModal = () => {
14        modalMain.classList.remove('active');
15        modalContent.innerHTML = "";
16        modalContainer.classList.remove('p-0');
17    };
18
19    /** Show the modal. */
20    const showModal = () => {
21        modalMain.classList.add('active');
22    };
23
24    /** Hide the modal on close button click. */
25    if(modalExit)
26    modalExit.addEventListener('click', (e) => {
27        e.preventDefault();
28        hideModal();
29    });
30
31    /**
32     * Show modal for typical dishes.
33     */
34    const itemTypicalDishes = document.querySelectorAll('.wrapper-typical-dishes .typical-dishes a.open-popup');
35
36    itemTypicalDishes.forEach(itemTypicalDish => {
37        itemTypicalDish.addEventListener('click', (e) => {
38            e.preventDefault();
39            
40            modalContainer.classList.add('p-0');
41
42            // Get the parent `.typical-dishes` element
43            const card = itemTypicalDish.closest('.typical-dishes');
44
45            // Extract data from the clicked card
46            const title = card.querySelector('h3 p').innerHTML.trim();
47            const description = card.querySelector('.descripcion').getAttribute('data-description');
48            const imageSrc = card.querySelector('img').getAttribute('src');
49            const imageAlt = card.querySelector('img').getAttribute('alt');
50
51            // Build new modal content
52            const newContent = `
53                <div class="modal-image">
54                    <img src="${imageSrc}" alt="${imageAlt}" class="img-fluid">
55                </div>
56                <div class="modal-content">
57                    <h3 class="modal-title">${title}</h3>
58                    <p class="modal-description">${description}</p>
59                </div>
60            `;
61
62            // Update modal content
63            modalContent.innerHTML = newContent;
64
65            // Show the modal
66            showModal();
67        });
68    });
69};
70
71const App = (() => {
72    return {
73        init: () => {
74            modals();
75        },
76    };
77})();
78
79App.init();