javascript - 我的模态框相互重叠，当点击两个时，它会触发相同的内容

Question

抱歉不得不再次发帖，因为我没有收到我上一篇帖子的相关答案，但我在页脚添加了 2 个模态框，比如当您单击一个按钮时，会弹出一个包含更多信息的模态框。模态按钮是订阅和关闭，但是当您单击订阅时，它会显示关闭模式而不是订阅模式。

我已尝试重命名模态并搜索互联网，包括此处和 youtube，但似乎没有任何效果。我用来制作模态的教程是 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom我希望我所有的模态框都是这种设计。

编辑:我有模态显示单独的内容，但现在当点击订阅按钮时，它会打开，但是当点击模态或点击 X 时模态不会关闭。我更新的代码是下面

我的 HTML 代码是:

 <footer>
  <div class="container">
    <div class="social">
      <ul>
        <li><a href=""><i class="fab fa-facebook"></i></a></li>
        <li><a href=""><i class="fab fa-twitter"></i></a></li>
        <li><a href=""><i class="fab fa-instagram"></i></a></li>
        <li><a href=""><i class="fab fa-youtube"></i></a></li>
        <li><a href=""><i class="fab fa-twitch"></i></a></li>
      </ul>
      </div>
      <div class=" footer-nav">
        <ul>
          <li><button id="subscribe-button">Subscribe</button><div id="subscribe-modal" class="modal"><div class="modal-content"><div class="modal-header"><span class="close">&times;</span></div><div class="modal-body"><h3>SUBSCRIBE TO THE Thunder Struck Games MAILING LIST</h3>
                    <p>Welcome to the Rockstar Games Subscription Management page. Rockstar mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all the updates.</p><a href="#" class="manage-button">Manage Your Account</a></div><div class="modal-footer"></div></div></div></li>
          <li><a href="#" target="_blank">Support</a></li>
          <li><a href="#" target="_blank">Careers</a></li>
          <li><button id="mouthoff-button">Mouthoff</button><div id="mouthoff-modal" class="modal"><div class="modal-content"><div class="modal-header"><span class="close">&times;</span></div><div class="modal-body"><h3>MOUTHOFF - TELL US WHAT'S ON YOUR MIND</h3>
                    <p>Welcome to the Rockstar Games Subscription Management page. Rockstar mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all the updates.</p><a href="#" class="manage-button">Manage Your Account</a></div><div class="modal-footer"></div></div></div></li>

我的 CSS 代码是:

.footer-nav li{
  list-style: none;
  display: inline-block;
  margin-top: 10px;
  padding: 5px;
  font-size: 11.25px;
  font-weight: bold;
}
.footer-nav a {
  display: inline-block;
  color: #000;
}
button {
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #000;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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 */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}
.modal-body h3 {
  text-align: center;
  margin-top: 10px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}
.modal-body p {
  text-align: justify;
  margin-top: 10px;
  font-size: 15px;
  margin-left: 250px;
  margin-right: 250px;
}
.manage-button {
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-right: 25px;
  margin-top: -40px;
  cursor: pointer;
  margin-left: 850px;
  margin-top: 25px;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}
.modal-body a:hover {
  background-color: #000;
  color: #fff;
}
}
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

我的 Javascript 代码是:

// Get the Subscribe modal
var subscribeModal = document.getElementById('subscribe-modal');

// Get the button that opens the modal
var subscribeBtn = document.getElementById("subscribe-button");

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

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

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == subscribeModal) {
    subscribeModal.style.display = "none";
  }
}
// Get the Mouthoff modal
var mouthoffModal = document.getElementById('mouthoff-modal');

// Get the button that opens the modal
var mouthoffBtn = document.getElementById("mouthoff-button");

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

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

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

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

感谢任何帮助并提前感谢您，再次为再次发帖致歉

Answer 1

也许为 mouth-button 和 mouth-modal 使用不同的变量名。