Почему не открывается ссылка на сторонний сайт из открытого модального окна?

Question

[silan]

Имеется: карточка со ссылкой, при клике на которую открывается модальное окно. В модалке имеется ссылка на сторонний сайт. При клике на нее ничего не происходит, ссылка открывается только при клике правой кнопкой и опцией открыть ссылку в новой вкладке. В чем может быть причина? Спасибо.

карточка со ссылкой на модалку

<li class="workshop__item">
        <article class="training-card">
          <div class="training-card__img">
            <img src="./images/training-img/1.jpg" loading="lazy" alt="photo training" width="362" height="246">
          </div>
          <div class="training-card__box">
            <h3 class="training-card__title">
              Handstand Workshop
            </h3>
            <ul class="training-card__list">
              <li class="training-card__item">
                <time class="training-card__info training-card__info--time" datetime="2012-12-23T08:23:11+07:00">
                  28.01.2023 12:30 - 15:30
                </time>
              </li>
            </ul>
            <div class="training-card__bottom">
              <a class="training-card__link" href="#" data-modal="one">
                info and booking
              </a>
            </div>
          </div>
        </article>
      </li>

модалка

<div class="modal" data-modal="one">
  <div class="modal__container" role="dialog" aria-modal="true">
    <button class="modal__close" aria-label="Закрыть модальное окно"></button>
    <div class="modal__content">
      <article class="training-card training-card--modal">
        <div class="training-card__img">
          <img src="./images/training-img/1.jpg" loading="lazy" alt="photo training" width="362" height="246">
        </div>
        <div class="training-card__box">
          <h3 class="training-card__title">
            Handstand Workshop
          </h3>
          <div class="training-card__text">
            <p>text</p>
          </div>
          <ul class="training-card__list">
            <li class="training-card__item">
            </li>
            <li class="training-card__item">
              <time class="training-card__info training-card__info--time" datetime="2012-12-23T08:23:11+07:00">
                28.01.2023 12:30 - 15:30
              </time>
            </li>
            <li class="training-card__item">
              <p class="training-card__info training-card__info--address">
                Adress
              </p>
            </li>
          </ul>
          <div class="training-card__bottom">
            <a class="training-card__link btn btn--orange" href="https://www.crossfiticke.com/icke-online-shop/handstand-workshop/?utm_source=CrossFit+Icke+Mitglieder&utm_campaign=94254610dc-EMAIL_CAMPAIGN_Icke_News_COPY_01&utm_medium=email&utm_term=0_d5bf45a069-94254610dc-355022127&goal=0_d5bf45a069-94254610dc-355022127&mc_cid=94254610dc&mc_eid=b8d36606f4">
              book workshop
            </a>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>

js

const btnModal = document.querySelectorAll('[data-modal]');
btnModal.forEach(item => {
  item.addEventListener('click', function (e) {
    disableScroll()
    e.preventDefault();
    const getAttr = e.target.getAttribute('data-modal');
    console.log(getAttr);
    const modal = document.querySelector(`.modal[data-modal="${getAttr}"]`);
    modal.classList.add('modal--visible');
    body.classList.add('body--hidden');
    modal.addEventListener('click', function (e) {
      if (e.target.classList == 'modal__close' || e.target.classList[0] == 'modal') {
        enableScroll()
        modal.classList.remove('modal--visible');
        body.classList.remove('body--hidden');
      }
    })
  })
})

let disableScroll = function () {
  let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px';
  body.style.paddingRight = paddingOffset;
}

let enableScroll = function () {
  body.classList.remove('disable-scroll');
  body.style.paddingRight = '0px';
}

Comments

[Ankhena]

Чудесный код, а теперь сделайте песочницу на codepen.io или аналоге так, чтобы можно было увидеть проблему.

[Сергей Канаев]

У тебя в js в первой строчке выбирается не только кнопка, но и модалка

const btnModal = document.querySelectorAll('[data-modal]');

Нет указания, что это кнопка, так как data-modal есть и у кнопки, и у самой модалки.
e.preventDefault();
Этот код заглушает нажатие на ссылку в модалке

[silan]

Ankhena, спасибо, решение, найдено, на будущее учту!

Answer 1

[Сергей Канаев]

В js попробуй так

const btnModal = document.querySelectorAll('.training-card__link[data-modal]');

Таким образом не будет реагировать на нажатия в модалке. Но лучше создай другой класс, если будешь делать модалок больше одного.

Comments

[silan]

спасибо, заработало!