主页 / 问题 / 1294516
Accepted
Cobra777
Asked:2022-06-12 22:25:34 +0000 UTC2022-06-12 22:25:34 +0000 UTC

如何打开所需的模态窗口？

  • 772

任务很简单——如何正确地重新制作这段代码，以便打开父级的模态窗口，即 例如，当您单击按钮 #2 时，仅打开模式窗口 #2？

const modalTrigger = document.querySelectorAll('[data-modal]'),
  modal = document.querySelector('.modal'),
  modalCloseBtn = document.querySelector('[data-close]');

modalTrigger.forEach((el) => {
  el.addEventListener('click', () => {
    modal.classList.add('show');
    modal.classList.remove('hide');
    document.body.style.overflow = 'hidden';
  });
});

function closeModal() {
  modal.classList.add('hide');
  modal.classList.remove('show');
  document.body.style.overflow = '';
}

modalCloseBtn.addEventListener('click', closeModal);
.hide {
  display: none;
}

.show {
  display: block !important;
}

.modal {
  position: fixed;
  background-color: red;
  z-index: 77777;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-close {
  font-size: 25px;
  cursor: pointer;
}

.modal-close:hover {
  color: white;
}
<div class="item">
  <p>Текст №1</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №1</p>
  </div>
</div>

<div class="item">
  <p>Текст №2</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №2</p>
  </div>
</div>

<div class="item">
  <p>Текст №3</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №3</p>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    出于某种原因，您决定调用模态窗口应该对元素进行循环，但关闭则不需要。诡异的。我重做了。

    您还决定调用模态窗口应该对元素进行循环，并且只使用一个模态窗口。还有诡异...

    一般来说，为了打开想要的模态，我从当前点击的元素中找到了父级，并从父级中找到了相同的模态。根据当前标记，按钮和模态都在同一个父级中

    const modalTrigger = document.querySelectorAll('[data-modal]');
const modalCloseBtn = document.querySelectorAll('[data-close]');
let modal = null;  

modalTrigger.forEach((el) => {
  el.addEventListener('click', () => {
    modal = el.parentElement.querySelector('.modal');
    modal.classList.add('show');
    modal.classList.remove('hide');
    document.body.style.overflow = 'hidden';
  });
});

function closeModal() {
  modal.classList.add('hide');
  modal.classList.remove('show');
  document.body.style.overflow = '';
  modal= null;
}

modalCloseBtn.forEach((el) => {
  el.addEventListener('click', closeModal);  
});

//modalCloseBtn.addEventListener('click', closeModal);
    .hide {
  display: none;
}

.show {
  display: block !important;
}

.modal {
  position: fixed;
  background-color: red;
  z-index: 77777;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-close {
  font-size: 25px;
  cursor: pointer;
}

.modal-close:hover {
  color: white;
}
    <div class="item">
  <p>Текст №1</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №1</p>
  </div>
</div>

<div class="item">
  <p>Текст №2</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №2</p>
  </div>
</div>

<div class="item">
  <p>Текст №3</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №3</p>
  </div>
</div>

    • 0

相关问题