如何触发第二个按钮打开另一个模态

时间：2018-01-18 09:31:57

标签： javascript html css

我对编码世界很陌生，特别是在使用JS或jQuery时。

我在网上找到了如何打开模态来显示信息。我目前正在开发一个页面，当您点击图片时，它会显示一个包含产品信息的模态。

我已经能够使一个按钮工作显示信息，但是当我触发第二个按钮时，它会使两个按钮显示相同的信息。

我无法看到我出错的地方。

以下是我正在使用的代码。

＆＃13;
＆＃13; 
// 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";
  }
}



// Get the modal
var modal = document.getElementById('mymodalTWO');

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

// 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";
  }
}
＆＃13; 
.boton {
  border: solid 3px black;
  padding: 3px 6px;
}

.productname {
  font-size: 20px;
}

.imagedesktop {
  width: 45%;
  float: left;
}


/* The Modal (background) */

.modal {
  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: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  margin-top: 110px;
  height: 680px;
}


/* The Close Button */

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
＆＃13; 
<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 class="productname">Tshirt</h2>
    <div>
      <img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
    </div>
    <div>
      <p>This is the first modal description.</p>
    </div>
    <div>
      <span class="boton"><a href="http://google.com">SHOP NOW</a></span>
    </div>
  </div>

</div>

<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
  <!-- Modal content TWO-->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 class="productname">Tshirt TWO</h2>
    <div>
      <img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
    </div>
    <div>
      <p>This is the second modal description.</p>
    </div>
    <div>
      <span class="boton"><a href="http://google.com">SHOP NOW!</a></span>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

您对两个模态使用相同的变量名称。您需要更改变量名称，以便在其中存储不同的信息。

正如你提到你是JS的初学者，你应该阅读更多关于范围界定的内容， this 帖子会对你有帮助。

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



// Get the modal
var modal2 = document.getElementById('mymodalTWO');

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

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

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

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal || event.target == modal2) {
    modal.style.display = "none";
    modal2.style.display = "none";
  }
}
.boton {
  border: solid 3px black;
  padding: 3px 6px;
}

.productname {
  font-size: 20px;
}

.imagedesktop {
  width: 45%;
  float: left;
}


/* The Modal (background) */

.modal {
  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: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  margin-top: 110px;
  height: 680px;
}


/* The Close Button */

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 class="productname">Tshirt</h2>
    <div>
      <img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
    </div>
    <div>
      <p>This is the first modal description.</p>
    </div>
    <div>
      <span class="boton"><a href="http://google.com">SHOP NOW</a></span>
    </div>
  </div>

</div>

<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
  <!-- Modal content TWO-->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 class="productname">Tshirt TWO</h2>
    <div>
      <img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
    </div>
    <div>
      <p>This is the second modal description.</p>
    </div>
    <div>
      <span class="boton"><a href="http://google.com">SHOP NOW!</a></span>
    </div>
  </div>

</div>

相关问题
最新问题