javascript - 我需要在一个网页中制作多个模式

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

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

• 无依赖
• 在按钮上使用 aria-controls 属性，它指向每个模态框的 id

来自 MDN 的关于 aria-controls 的更多信息:

The aria-controls=[IDLIST] is used to associate a control with the regions that it controls. Regions are identified just like an id in a div, and multiple regions can be associated with a control using a space, e.g. 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