多模态
多模态
提问于 2014-12-25 20:39:49
我正在尝试添加多个模态窗口到我的页面，但不要管理得很好。目前，我正在使用下面的代码，我需要对其进行修改，以便与多个modals一起使用。
HTML：
<div class="modal">
<div class="overlay"></div>
<div class="modal--contents modal--transition">
<a class="modal--close" href="#"><img src="/images/icons/modal/close.png">Close</a>
<h2>How to install on Windows</h2>
<div class="instructions">
<div class="instructions-single">
<img src="/images/placeholders/step.png" alt="Step 1">
<h3>Step 1</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="instructions-single">
<img src="/images/placeholders/step.png" alt="Step 2">
<h3>Step 2</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="instructions-single">
<img src="/images/placeholders/step.png" alt="Step 3">
<h3>Step 3</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="overlay--trigger btn"><img src="/images/icons/download/help_icon.png" alt="Help">How to install</a>联署材料：
var modal = $('.modal');
$( ".btn" ).on( "click", function() {
$( modal ).toggleClass('modal--show');
});
$( ".overlay" ).on( "click", function() {
$( modal ).toggleClass('modal--show');
});
$( ".modal--close" ).on( "click", function() {
$( modal ).toggleClass('modal--show');
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-25 21:01:46
如果您在一页上使用多个调制解调器，我会这样做：
无论何时，只要您有一个要触发特定模式的.btn，就向其中添加一个data-attr，如下所示：
<div class="btn" data-modal-type="type1">或
<div class="btn" data-modal-type="type2">我会为每个模式在html中添加一个相同的id：
<div class="modal" id="type1">您应该在单击时拉出该类型，并使用它触发正确的模式：
$(".btn").click(function(){
var Type = $(this).data("modal-type");
$("#"+Type).toggleClass('modal--show');
});这样，你就能更具体地了解你正在触发的模式。
SAMPLE FIDDLE
老实说，更有效的方法是在单击时使用ajax动态加载包含相应信息的单独文件。这样，您将只有一个情态脚本，并交换信息。
更新
这就是我基于你的codePen的意思：
CODEPEN
Stack Overflow用户
发布于 2014-12-25 20:57:01
代替$(modal)使用modal.无处不在
var modal = $('.modal');
$( ".btn" ).on( "click", function() {
modal.toggleClass('modal--show');
});
$( ".overlay" ).on( "click", function() {
modal.toggleClass('modal--show');
});
$( ".modal--close" ).on( "click", function() {
modal.toggleClass('modal--show');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27650584
复制相关文章
相似问题
腾讯云开发者
