javascript - 打开具有不同内容的多个模态 - CSS 和 JS

Question

我正在尝试在页面上打开多个模式，但在弄清楚如何让每个模式包含不同的内容方面遇到了很多麻烦。我是 javascript 和模态的新手，所以这已经是一个挑战，但通过查找我的问题，我发现也许我需要学习另一种语言，比如 jQuery 来实现我的目标？

如果您可以查看我的代码并帮助我或引导我走向正确的方向，我将不胜感激!

HTML

<section class="section section-b">
<div class="container">
<h1>Workshops</h1>
<div class="grid-container">
  <div id="modalBtn" class="grid-box grid-box-a">
    <h3>Yoga Bootcamp</h3>
  </div>
  <div id="modalBtn" class="grid-box grid-box-b">
    <h3>Meditation</h3>
  </div>
  <div id="modalBtn" class="grid-box grid-box-c">
    <h3>Pregnancy</h3>
  </div>
  <div id="modalBtn" class="grid-box grid-box-d">
    <h3>Finding Gratitude</h3>
  </div>
</div>
<div id="modalContainer" class="modal">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Yoga Bootcamp</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
<div id="modalContainer" class="modal">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Meditation</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
<div id="modalContainer" class="modal">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Pregnancy</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
<div id="modalContainer" class="modal">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Finding Gratitude</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
</div>

JS

var modal = document.getElementById('modalContainer');
var btn = document.getElementById('modalBtn');
var span = document.getElementsByClassName('close')[0];

btn.onclick = function() {
  modal.style.display = 'block';
}

span.onclick = function() {
  modal.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}

我意识到现在我只针对第一个 div，但我尝试创建一个循环但没有成功，并且希望避免为每个 div 重复代码。我想要用 JS 实现的目标是可能的还是其他语言更有意义？

Answer 1

您需要提供Unique ID为每个模式添加一个点击 EventListener触发特定模式打开的每个按钮。您可以手动为每个按钮添加单击事件，或者像我下面所做的那样简单地循环它们。为了以自动化的方式实现这一点，我将每个按钮模态的 id 存储在 data attribute 中。并使用 document.querySelectorAll 选择相似元素组.

let buttons = document.querySelectorAll('nav button');
let modals = document.querySelectorAll('.modal');

function showModal(id) {
  let m = document.getElementById(id);
  m.classList.add('visible');
}

function hideModals() {
  modals.forEach(m => {
    m.classList.remove('visible');
  });
}

buttons.forEach(b => {
  b.addEventListener('click', event => {
    hideModals();
    showModal(b.dataset.modal);
  });
});

modals.forEach(m => {
  let x = m.querySelector('button.close');
  x.addEventListener('click', hideModals);
});

nav {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-around;
}

nav button {
  font-size: 1.5rem;
  cursor: pointer;
}

.modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  color: white;
}

.modal button.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
}

.visible {
  opacity: 1;
  pointer-events: all;
}

<nav>
  <button data-modal="yoga"> Yoga Bootcamp </button>
  <button data-modal="meditation"> Meditation </button>
  <button data-modal="pregnancy"> Pregnancy </button>
</nav>

<div class="modal" id="yoga">
  <button class="close">&times;</button>
  <h4>Yoga Bootcamp</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
</div>

<div class="modal" id="meditation">
  <button class="close">&times;</button>
  <h4>Meditation</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
</div>

<div class="modal" id="pregnancy">
  <button class="close">&times;</button>
  <h4>Pregnancy</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
</div>

顺便说一句，我削减了此代码片段的标记并使用了更多 semantic元素，以便更容易地看到正在发生的事情。我还包括了一个平滑的过渡，因为这只是一个很好的实践，因为它可以带来更好的 user experience .