Question

我正在尝试在页面上打开多个模式，但是在弄清楚如何使每个模式包含不同的内容时遇到了很多麻烦。我是Java语言和模态语言的新手，所以这已经是一个挑战，但是通过在此处查找问题，我发现也许我需要学习另一种语言（如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

此jsFiddle可能会有所帮助。这是使用标题和内容不同的相同模式的示例（使用jQuery和Bootstrap）

<div class="container">
<h2>Same modal different content</h2>
<div class="grid-container">
  <div  class="grid-box grid-box-a modal-toggle" data-title="First" data-content="First content." >
    <h4>First</h4>
  </div>
  <div class="grid-box grid-box-b modal-toggle" data-title="Second" data-content="Second content.">
    <h4>Second</h4>
  </div>

</div>
<div class="modal" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mtitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" >
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

<script>
$(document).ready(function () {
    $(".modal-toggle").click(function () {
        $('.modal-title').html($(this).data('title'));
         $('.modal-body').html($(this).data('content'));
        $('#myModal').modal('show');
    });
});
</script>

Answer 2

如果要按下任何按钮，它会同时显示所有模态吗？如果是这样，请尝试使用id的类intead，每个元素的id必须唯一，将 id =“ modalBtn” 更改为 class =“ modalBtn” 和 var modal = document.getElementById（'modalContainer'）; for var modal = document.getElementById（'modalmodal'）;

但是，如果要第一个按钮打开第一个模式，请为每个按钮和每个模式尝试不同的ID。

Answer 3

您需要为每个模式提供一个Unique ID，并向每个按钮添加一个点击EventListener，以触发特定模式的打开。您可以手动为每个按钮添加click事件，或者像我在下面所做的那样简单地将它们循环。为了实现此目的，我将每个按钮的模式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。

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

3 个答案: