Question

我想知道我应该添加或更改的内容，以便w3schools教程适用于多个“模式框”

链接：https://www.w3schools.com/howto/howto_css_modals.asp

想法是修改代码，我可以根据需要创建任意数量的“项目”或“模态框”，我尽量不只使用jquery javasript。

注意：第一个“项目”正常运行，而第二个“项目”无效。

编辑：我知道不能在html中重复相同的ID，但是在javascript中，当我通过document.getElementsByClassName（）更改document.getElementById（）时，模式框不起作用

代码：

// 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 on 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";
    }
}

.item {
  display: block;
  overflow: hidden;
  background-color: cyan;
  
  margin: 10px 0;
}

.image {
  width: 160px;
  float: left;
}

.modal {
  display: none;
  position: fixed;
  z-index 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.418);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width 80%;
}

.close {
  float: right;
  font-size: 20px;
  font-weight: 700;
}
.close:hover, close:focus {
  color: gold;
  text-decoration: none;
  cursor: pointer;
}

<div class="container">
  
  <div class="item">
    <img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
    <button class="open-modal" id="myBtn">More Info</button>
    
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">X</span>
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
        <button>Button</button>
        <button>Button</button>
      </div>
    </div>
  </div>
  
  
  <div class="item">
    <img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
    <button class="open-modal" id="myBtn">More Info</button>
    
        <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">X</span>
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
        <button>Button</button>
        <button>Button</button>
      </div>
    </div>
  </div>
</div>

Answer 1

更改模态的ID。 ID无法重复。

Answer 2

ID应该是唯一的，您可以在按钮/跨度上添加onclick事件；

<button class="open-modal" id="myBtn" onclick="openModal('myModal');">More Info</button>

<span class="close" onclick="closeModal('myModal')">X</span>

然后，openModal和closeModal函数应将目标的ID作为参数。查看并运行下面的代码。

var modal = "";

function openModal(target) {
  modal = document.getElementById(target);
  modal.style.display = "block";
}

function closeModal(target) {
  modal = document.getElementById(target);
  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";
  }
}

.item {
  display: block;
  overflow: hidden;
  background-color: cyan;
  margin: 10px 0;
}

.image {
  width: 160px;
  float: left;
}

.modal {
  display: none;
  position: fixed;
  z-index 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.418);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width 80%;
}

.close {
  float: right;
  font-size: 20px;
  font-weight: 700;
}

.close:hover,
close:focus {
  color: gold;
  text-decoration: none;
  cursor: pointer;
}

<div class="container">

  <div class="item">
    <img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
    <button class="open-modal" id="myBtn" onclick="openModal('myModal');">More Info</button>

    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close" onclick="closeModal('myModal')">X</span>
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
        <button>Button</button>
        <button>Button</button>
      </div>
    </div>
  </div>


  <div class="item">
    <img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
    <button class="open-modal" onclick="openModal('myModal2')">More Info</button>

    <div id="myModal2" class="modal">
      <div class="modal-content">
        <span class="close" onclick="closeModal('myModal2')">X</span>
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
        <button>Button</button>
        <button>Button</button>
      </div>
    </div>
  </div>
</div>

W3Schools在同一页面上的多个模式框不起作用

2 个答案: