时间戳

首页 > 解决方案 > 我的模态相互重叠，当两者被点击时，它会触发相同的内容

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

问题描述

抱歉不得不再次发帖，因为我没有收到上一篇文章的相关答案，但是我的页脚中添加了 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";
  }
}

任何帮助表示赞赏并提前感谢您，并再次为再次发帖道歉

标签： javascripthtmlcss

解决方案

也许对嘴巴按钮和嘴巴模式使用不同的变量名。

推荐阅读