CODE EXAMPLE FOR JAVASCRIPT

modal javascript

const modalGallery = (id) => {
    let modal = $('#modal-gallery-before-after');
    let popup = modal.querySelector('.popup');
    let compare__item = $(`.compare__item-${id}`);
    let popupWrap = modal.querySelector(".popup__wrap");
    let popupItems = modal.querySelector(".popup__item");
    let modal_gallery_item = $(".modal-gallery-item");
    let item__image = compare__item.querySelector('.modal-image').innerHTML;
    let item__title = compare__item.querySelector('.modal-title').innerHTML;
    let modalItem = `<div id="modal__item-${id}" class="modal__item">
    <div class="modal__image">${item__image}</div>
    <div class="modal__title">${item__title}</div>
    </div>`;
    popupItems.setAttribute('data-popup', `${id}`);
    modal_gallery_item.innerHTML = modalItem;
    popup.style.display = "block !important";
    $(`.popup__item[data-popup="${id}"]`).classList.add("show_data");
    popupWrap.classList = `popup__wrap popup__wrap--${id}`;
    setTimeout(() => {
        popup.classList.add("show_data");
    }, 10);
}

const closeModal = () => {
   let modal = $('#modal-gallery-before-after');
   let popup = modal.querySelector('.popup');
   let popupWrap = modal.querySelector(".popup__wrap");
   popup.classList.remove("show_data");
   setTimeout(() => {
    popup.style.display = "";
    popupWrap.classList = `popup__wrap`;
}, 500);
}