javascript - 如何添加多个模态

标签 javascript html css

<分区>

我有 2 个模态，但是当我点击第二个模态“Mouthoff”时，它会显示订阅的内容，当我点击订阅时，它只会显示订阅内容。我希望 2 个模式显示不同的内容。

我在这里搜索过，youtube 等，我找不到解决方案

// Get the modal
var modal = document.getElementById("subscription");

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

// 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("shout");

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

// 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";
  }
}
button.subscribe {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.subscribe:focus {
  outline: none;
}


/* The Modal (background) */

.subscribe-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 */

.subscribe-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: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.subscribe-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.subscribe-body {
  padding: 2px 16px;
}

.subscribe-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.subscribe-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.subscribe-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.subscribe-body a.manage:hover {
  background: #000;
  color: #fff
}

.subscribe-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
  }
}

button.mouthoff {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.mouthoff:focus {
  outline: none;
}


/* The Modal (background) */

.mouthoff-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 */

.mouthoff-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
}

.mouthoff-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.mouthoff-body {
  padding: 2px 16px;
}

.mouthoff-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.mouthoff-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.mouthoff-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.mouthoff-body a.manage:hover {
  background: #000;
  color: #fff
}

.mouthoff-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
  }
}
<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Subscribe</button>

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

  <!-- Modal content -->
  <div class="subscribe-content">
    <div class="subscribe-header">
      <span class="close"></span>
    </div>
    <div class="subscribe-body">
      <h2>Subscribe to the Galaxy Mailing List</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy 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="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>





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

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

  <!-- Modal content -->
  <div class="mouthoff-content">
    <div class="mouthoff-header">
      <span class="close"></span>
    </div>
    <div class="mouthoff-body">
      <h2>Mouthoff - Tell Us What's On Your Mind</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy 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="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>

最佳答案

您需要为不同的 QuerySelectors 使用不同的变量名才能访问它们，或者您正在重新分配它们。

如果重新分配，它将丢弃第一个并选择后一个。

// Get the modal
var modal = document.getElementById("subscription");

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

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

// Get the modal
var shoutModal = document.getElementById("shout");

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

// Get the <span> element that closes the modal
var spanClose = 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 the button, open the modal 
mouthoffButton.onclick = function() {
  shoutModal.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal || event.target == shoutModal) {
    shoutModal.style.display = "none";
    modal.style.display = "none";
  }
}
button.subscribe {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.subscribe:focus {
  outline: none;
}


/* The Modal (background) */

.subscribe-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 */

.subscribe-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: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.subscribe-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.subscribe-body {
  padding: 2px 16px;
}

.subscribe-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.subscribe-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.subscribe-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.subscribe-body a.manage:hover {
  background: #000;
  color: #fff
}

.subscribe-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
  }
}

button.mouthoff {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.mouthoff:focus {
  outline: none;
}


/* The Modal (background) */

.mouthoff-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 */

.mouthoff-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
}

.mouthoff-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.mouthoff-body {
  padding: 2px 16px;
}

.mouthoff-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.mouthoff-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.mouthoff-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.mouthoff-body a.manage:hover {
  background: #000;
  color: #fff
}

.mouthoff-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
  }
}
<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Subscribe</button>

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

  <!-- Modal content -->
  <div class="subscribe-content">
    <div class="subscribe-header">
      <span class="close"></span>
    </div>
    <div class="subscribe-body">
      <h2>Subscribe to the Galaxy Mailing List</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy 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="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>





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

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

  <!-- Modal content -->
  <div class="mouthoff-content">
    <div class="mouthoff-header">
      <span class="close"></span>
    </div>
    <div class="mouthoff-body">
      <h2>Mouthoff - Tell Us What's On Your Mind</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy 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="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>

关于javascript - 如何添加多个模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57547873/

上一篇：html - 响应式 Masonry 布局组件未根据视口(viewport)调整大小

下一篇：Html/CSS - 图像大小和文本内容大小相等

相关文章：

javascript - 图片在响应时从 BW 淡入颜色

javascript - JS使用扩展运算符克隆对象并更改一个字段

javascript - 显示附加信息表单字段

javascript - 使用javascript在html页面中查找单词

html - 如何仅使用 html 打印编号 6 的有序列表？

javascript - 用 JS 下拉

javascript - 扩展 Backbone.Collection 原型(prototype)

javascript - 如何使用 angular.js 传递参数？

javascript - 如何使用 JQuery 提示用户后删除动态表的特定行？

css - 哪种屏幕阅读器最适合测试网站的可访问性以及如何配置它？

©2024 IT工具网  联系我们