Breaking News: Grepper is joining You.com. Read the official announcement!

modal html

pho dev answered on July 25, 2022 Popularity 10/10 Helpfulness 1/10

answer modal html

related modal javascript

modal html

Comment

<div id="modal-gallery-before-after">
    <div class="popup">
        <div class="popup__overlay" onclick="closeModal()"></div>
        <div class="popup__wrap">
            <div class="popup__close" onclick="closeModal()">
            <svg style="width:16px" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M15.4905 15.4905C15.3294 15.652 15.1379 15.7802 14.9272 15.8676C14.7165 15.955 14.4905 16 14.2624 16C14.0342 16 13.8083 15.955 13.5976 15.8676C13.3868 15.7802 13.1954 15.652 13.0342 15.4905L7.99963 10.456L2.96504 15.4905C2.63931 15.8163 2.19753 15.9993 1.73688 15.9993C1.27623 15.9993 0.834449 15.8163 0.508721 15.4905C0.182992 15.1648 0 14.723 0 14.2624C0 14.0343 0.0449253 13.8084 0.132212 13.5977C0.219498 13.387 0.347436 13.1955 0.508721 13.0342L5.54331 7.99963L0.508721 2.96504C0.182992 2.63931 0 2.19753 0 1.73688C0 1.27623 0.182992 0.834449 0.508721 0.508721C0.834449 0.182992 1.27623 0 1.73688 0C2.19753 0 2.63931 0.182992 2.96504 0.508721L7.99963 5.54331L13.0342 0.508721C13.1955 0.347436 13.387 0.219498 13.5977 0.132212C13.8084 0.0449253 14.0343 0 14.2624 0C14.4905 0 14.7163 0.0449253 14.9271 0.132212C15.1378 0.219498 15.3293 0.347436 15.4905 0.508721C15.6518 0.670005 15.7798 0.861477 15.8671 1.07221C15.9543 1.28293 15.9993 1.50879 15.9993 1.73688C15.9993 1.96497 15.9543 2.19083 15.8671 2.40156C15.7798 2.61229 15.6518 2.80376 15.4905 2.96504L10.456 7.99963L15.4905 13.0342C16.1525 13.6962 16.1525 14.8111 15.4905 15.4905Z" fill="#CF2144"/>
            </svg>
            </div>
            <div class="popup__item" data-popup ="">
                <div class="appointment__form form--style-full">
                    <div class="modal-gallery-item"></div>
                </div>
            </div>
        </div>
    </div>
</div>
 <div id="<?= get_the_ID() ?>" class="compare__item-<?= get_the_ID() ?>" data-popup="<?= get_the_ID() ?>" onClick="modalGallery(this.id)">
      <div class="modal-image">
           <?php the_post_thumbnail(); ?>
      </div>
      <div class="modal-title">
            <p><?= wp_trim_words(the_content(), 14); ?></p>
      </div>
  </div>

Popularity 10/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Jul 25 2022

pho dev

0 Answers Avg Quality 2/10

Closely Related Answers

modal javascript

Comment

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);
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 25 2022

pho dev

0 Answers Avg Quality 2/10

modal html

Contents

More Related Answers

modal html

Closely Related Answers

modal javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.