Question

我需要在HTML页面中制作多个模态，我可以制作一个能正常工作的模态，但是当我制作另一个模态却不起作用。

      <!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <div class="modal-header">
          <span class="close">&times;</span>
            <h3>Edit Intro</h3>
            <h2></h2>
          </div>
          <div class="modal-body">
           <center><br> School/Collage<br><input type="text" name="" style="width:100%"><br><br>
            Degree<br><input type="text" name="" style="width:100%"><br><br>
            Field of study<br><input type="text" name="" style="width:100%"><br><br>
          Start Date<input type="date" name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; End Date<input type="date" name=""><br><br>
          grade<br><input type="text" name="" style="width:100%"><br><br>
           Descrption<br><textarea cols="30%" rows="4%"></textarea>
          </div></center>

              <a href=""><button class="modalsave">Save</button></a>
              <a href=""><button class="modalcencel">Cencel</button></a>

        </div>

      </div>

                       <script>
                    // Get the modal
                    var modal = document.getElementById('myModal');

                    // Get the button that opens the modal
                    var btn = document.getElementById("myBtn");

                    // Get the <span> element that closes the modal
                    var span = document.getElementsByClassName("close")[0];

                    // When the user clicks the button, open the modal 
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }

                    // When the user clicks on <span> (x), close the modal
                    span.onclick = function() {
                      modal.style.display = "none";
                    }

                    // When the user clicks anywhere outside of the modal, close it
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
                      }
                    }
                    </script>

这个模态有效，但是当我在同一页面上使用多个模态的代码时，最上面的一个有效，但后来的无效。

Answer 1

Modal的字面意思是这样的元素，它阻止对UI其余部分的访问，直到用户完成与之交互并关闭它为止。因此，通常一次只有一个活动模态（顶部）是正常的。

所以我想您在这里真正要问的是-为什么您的代码一次不显示多个弹出窗口。这样做的原因是该代码不是通用代码，而是引用特定的DOM元素（#myModal，其所有内容作为弹出窗口包装器，#myBtn作为弹出窗口的触发器），仅引用{{1} }元素是通用的（因此，具有.close类的任何DOM元素都可以用作关闭控件）。但是同样，您将点击处理程序仅附加到第一个找到的.close元素上。因此，它仅显示一个弹出窗口，因为您在页面上只有的一个弹出窗口。

您需要概括该代码。

Answer 2

看看这个演示。这是一个简单易用的系统，可在同一页面上使用多个模式。

没有依赖项
在按钮上使用aria-controls属性，该属性指向每个模式的id

来自MDN的aria-controls方面的更多信息：

aria-controls = [IDLIST]用于将控件与它控制的区域。区域的识别就像ID中的ID div，并且可以使用空间，例如aria-controls =“ myRegionID1 myRegionsID2”

const buttons = document.querySelectorAll('[aria-controls]');
const modalButtons = document.querySelectorAll('.modal button');
const modals = document.querySelectorAll('.modal');

function hideModals() {
  modals.forEach(modal => modal.style.display = 'none');
}

function showModal(modalId) {
  document.getElementById(modalId).style.display = 'block';
}

function handleButtonClick() {
  const modalId = this.getAttribute('aria-controls');
  hideModals();
  showModal(modalId);
}

buttons.forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

modalButtons.forEach(button => {
  button.addEventListener('click', hideModals);
});


// Hide modal when user clicks outside of modal content
window.onclick = event => {
  if (event.target.classList.contains('modal')) {
    hideModals();
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 1em);
  width: calc(100vw - 1em);
  flex-direction: column;
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal>* {
  color: white;
}

<div class="modal" id="modal1">
  <div class="modal-content">
    <p>Hello, I'm modal 1</p>
    <button>Close</button>
  </div>
</div>

<div class="modal" id="modal2">
  <div class="modal-content">
    <p>Hello, I'm modal 2</p>
    <button>Close</button>
  </div>
</div>

<button aria-controls="modal1">Open modal 1</button>
<button aria-controls="modal2">Open modal 2</button>

jsFiddle

我需要在一个网页中制作多个模态

2 个答案: