javascript - 同一 html 页面中的多个模式

Question

基本上，我有 2 个模态框，我想显示它们。但是当我尝试显示第二个时，它没有显示，当我点击第一个按钮时，第二个出现。当我关闭第二个 Modal 时，第一个出现，但我无法关闭第一个。我是这方面的初学者，所以我真的什么都不知道，任何与此类似的帖子的链接将不胜感激。这是 HTML 代码:

  <div id= "Modal1" class="modal1">
    <div class="modal-content">
      <span class="close1">&times;</span>
      <img class="modal-image" src="vb1.png">
      <Strong>Product 1</Strong>
      <h5>Price: 8.00€</h5>
      <h5>About: This product</h5>
      <h5>Payment Methods: PayPal</h5>
    </div>

    <script>
    var modal1 = document.getElementById('Modal1');
    var btn1 = document.getElementById("vb1");
    var span = document.getElementsByClassName("close1")[0];
    btn1.onclick = function() {
      modal1.style.display = "block";
    }
    span.onclick = function() {
      modal1.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal1) {
        modal1.style.display = "none";
      }
    }
    </script>

    <div id= "Modal2" class="modal2">
      <div class="modal-content">
        <span class="close2">&times;</span>
        <img class="modal-image" src="vb2.png">
        <Strong>Product 2</Strong>
        <h5>Price: 17.00€</h5>
        <h5>About: This product</h5>
        <h5>Payment Methods: PayPal</h5>
      </div>

      <script>
      var modal2 = document.getElementById('Modal2');
      var btn2 = document.getElementById("vb2");
      var span2 = document.getElementsByClassName("close2")[0];
      btn2.onclick = function() {
        modal2.style.display = "block";
      }
      span.onclick = function() {
        modal2.style.display = "none";
      }
      window.onclick = function(event) {
        if (event.target == modal2) {
          modal2.style.display = "none";
        }
      }
      </script>

这是 CSS 代码:

    .modal1 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4)
}

.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4)
}

.modal-image{
  margin-right:1rem;
  width:20%;
  height: auto;
  border: 1px solid darkorange;
  border-radius: 10px;
  float:left;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px;
}

.close1 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close1:hover,
.close1:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.close2 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close2:hover,
.close2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

以及打开模态框的代码:

<div class="item-1">
        <div class="shop-product"id="vb1">
          <img src="vb1.png"  alt="" class="product">
          <h4>Product 1</h4>
          <div class="product-price">
            <ins>8.00€</ins> <del>10.00€</del>
          </div>
        </div>
      </div>
      <div class="item-2">
        <div class="shop-product" id="vb2">
          <img src="vb2.png"  alt="" class="product">
          <h4>Product 2</h4>
          <div class="product-price">
            <ins>17.00€</ins> <del>25.00€</del>
          </div>
        </div>
      </div>

还有 CSS:

.product-price{
  Color: white;
  text-align: center;
  width: 100%;
  font-size: 20px;
}

.shop-product{
  Color: white;
  text-align: center;
  font-size: 25px;
}

.item-1{
  background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid darkorange;
  border-radius: 10px;
  padding: 10px;
  float: left;
}

.item-1:hover{
  background-color: rgba(0, 0, 0, 0.85);
  transition: all 0.2s ease-in;
  cursor:pointer;
}

.item-2{
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid darkorange;
  border-radius: 10px;
  padding: 10px;
  margin-left: 15px;
  float: left;
}

.item-2:hover{
  background-color: rgba(0, 0, 0, 0.85);
  transition: all 0.2s ease-in;
  cursor:pointer;
}

.row-shop-1{
  padding-top: 2%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) ;
}

.product{
  width:150px;
  height: auto;
}

.shop{
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 1900px;
  margin-left: 0px;
  margin-top: 0px;
}

Answer 1

您的 span var 有两个事件 onclick 监听器附加到同一元素，因此我将第二个更改为 span2。该窗口还有两个 onclick 监听器，因此它只使用了第二个。所以我把它们合二为一:

var modal1 = document.getElementById('Modal1');
var btn1 = document.getElementById("vb1");
var span = document.getElementsByClassName("close1")[0];
var modal2 = document.getElementById('Modal2');
var btn2 = document.getElementById("vb2");
var span2 = document.getElementsByClassName("close2")[0];


function start() {
  btn1.onclick = function() {
    modal1.style.display = "block";
  }
  span.onclick = function() {
    modal1.style.display = "none";
  }
  window.onclick = function(event) {
    if (event.target == modal1) {
      modal1.style.display = "none";
    } else if (event.target == modal2) {
      modal2.style.display = "none";
    }
  }
  btn2.onclick = function() {
    modal2.style.display = "block";
  }
  span2.onclick = function() {
    modal2.style.display = "none";
  }
}

window.onload = start();

.close2:hover,
.close2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal1 {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4)
}

.modal2 {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4)
}

.modal-image {
  margin-right: 1rem;
  width: 20%;
  height: auto;
  border: 1px solid darkorange;
  border-radius: 10px;
  float: left;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
}

.close1 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close1:hover,
.close1:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close2 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

<button id="vb1">Modal1</button>
<button id="vb2">Modal2</button>

<div id="Modal1" class="modal1">
  <div class="modal-content">
    <span class="close1">&times;</span>
    <img class="modal-image" src="vb1.png">
    <Strong>Product 1</Strong>
    <h5>Price: 8.00€</h5>
    <h5>About: This product</h5>
    <h5>Payment Methods: PayPal</h5>
  </div>
</div>

<div id="Modal2" class="modal2">
  <div class="modal-content">
    <span class="close2">&times;</span>
    <img class="modal-image" src="vb2.png">
    <Strong>Product 2</Strong>
    <h5>Price: 17.00€</h5>
    <h5>About: This product</h5>
    <h5>Payment Methods: PayPal</h5>
  </div>
</div>