搜索
搜索

如何添加多个模态

Kyle Logan 发表于 Dev
34
凯尔·洛根（Kyle Logan）

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

我在这里搜索了youtube ect，但找不到解决方案 

// 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用模态在同一页面上添加多个幻灯片？

Maven代理：如何添加多个端口？

如何添加多个选择选项

如何使用载波添加多个图像

C-如何添加多个标志

如何添加多个自动行跨度

如何添加多个$ body_messages？

密谋：如何添加多个y轴？

如何向JComponent添加多个矩形？

如何为phpcs添加多个路径？

如何使用purrr添加多个列？

如何使用appendChild添加多个div？

如何向枚举添加多个属性？

连接时如何添加多个列？

如何添加多个函数的迭代

如何向模型添加多个过滤

如何添加多个WHERE条件

如何添加多个jquery方法？

如何向事件添加多个条目

如何添加多个标题的HTML表？

Python如何添加多个列表的和

如何添加多个动态 WHERE 查询？

如何向GridView添加多个布局？

如果可能，我如何添加多个？

如何添加多个前缀 - JDA

添加多个列表

添加多个SUMIF

添加多个对象

如何在 mschart 中添加多个 x 轴？

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档