Закройте модальное окно снаружи и кликабельные ссылки внутри - PullRequest
Новая
       10

Закройте модальное окно снаружи и кликабельные ссылки внутри

1 голос
/ 02 апреля 2019

Мне удалось получить представление о том, как закрыть модальное окно при щелчке снаружи, но у меня возникают проблемы с его работой при попытке получить ссылки внутри модального окна.

Я создал небольшоекод в Codepen, чтобы проиллюстрировать мою точку зрения:

https://codepen.io/neotriz/pen/MRwLem

window.addEventListener('load', setup);

const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);

function setup() {

  let modalRoot = get('modal-root');
  let button = get('modal-opener');
  let modal = query('.modal');

  modalRoot.addEventListener('click', rootClick);
  button.addEventListener('click', openModal);
  modal.addEventListener('click', modalClick);

  function rootClick() {
    modalRoot.classList.remove('visible');
  }

  function openModal() {
    modalRoot.classList.add('visible');
  }

  function modalClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    return false;
  }

}

1 Ответ

1 голос
/ 02 апреля 2019

удалить e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); из modalClick. Вот почему вы не можете нажать на внутренние ссылки.

и измените функцию rootClick

function rootClick(event) {
          if (!(modal == event.target || modal.contains(event.target))) {
    modalRoot.classList.remove('visible');
          }
  }

Codepen: https://codepen.io/anon/pen/ZZGwRr

...