繁体   English   中英

如何添加多个模态

How to add multiple modals [duplicate]

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

这个问题已经在这里有了答案:

我有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> 

1 个回复

您需要为不同的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> 

1 如何添加多个模态?

我目前正在从事博客设计,无法创建多个模式。 我认为应该在Javascript中定义模式。 // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens ...

2 如何添加多个模态框

我在一个网站上工作,我有我的模态框的基础,但我想要的不仅仅是一个。 我见过人们只是为所有模态框复制和粘贴相同的 javascript 代码,但我想知道是否有更简单的方法,这是我的代码 // just to pretty up the box and add come color const box ...

3 向jQuery UI对话框模态添加多个字段

我有一个对话框模式,我想向他们添加一个选择字段和一个表。 对话框模态,选择字段和表格字段都有html描述 还有一个jQuery代码,我在其中管理对话框模式 但是当我运行时,我只有添加的最后一个字段(表格),因此我看不到两个字段(表格和选择)。 任何人都可以告诉我我错了 ...

6 添加多个项目

我想将价格输入多个框,其中1个框默认为某个值。 以下代码仅将值添加为字符串。 我怎样才能做到这一点? ...

7 添加多个UIWindow

我正在添加一个新的UIWIndow来显示一个视图,但它没有显示任何内容,屏幕只是有点模糊。 这是代码: 我究竟做错了什么? ...

8 添加多个框架

如果我希望单击某个按钮后,当前框架应关闭并且新框架应显示新内容,我该怎么做? 例如,我有一个登录按钮,单击该按钮会导致一个新框架并关闭旧框架。 现在如何添加新框架? ...

9 如何添加多个反应?

我到处都在寻找答案,但我无法解决。 这是我想做的: 我想最初为我的机器人运行一些命令,以将嵌入内容发送到只有管理员有权访问的特定频道。 完成。 然后,该漫游器将立即对自己的消息做出反应,并带有表情符号1、2和3。问题。 我不想让机器人等待管理员对消息的反应。 ...

10 向 IF/OR 添加多个语句

我想添加一个公式,该公式将多个 ifs 表述为一个方程(不是最好的) 方程如下,在单元格 H2 中 想要尽可能简单地使它开始类似于下面的内容,只是不确定如何添加其余部分。 开始于 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM