一个页面上有多个模态框
More than one Modal Boxes on one page
这里我放了两个按钮,点击它们会弹出一个模式框。
<li type="button" id="myBtn" class="w3-hide-small w3-center"><a href="#" class="w3-hover-white">1</a></li>
<li type="button" id="myBtn2" class="w3-hide-small w3-center"><a href="#" class="w3-hover-white">2</a></li>
这是第一周的模态信息:
<!-- MODAL INFORMATION FOR WEEK 1 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><h2><font color="black">Week 1</font></h2></p>
<div class="modal-body">
<p><font color="black"> ex1</p>
</div>
</div>
</div>
这是第二周的模态信息:
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><h2><font color="black">Week 2</font></h2></p>
<p><font color="black"> Example 1 </p>
</div>
</div>
脚本:
<script>
// Get the modal
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// 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";
}
btn2.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";
}
}
</script>
我认为改变ID将允许我以不同的方式对待模态框彼此,我也叫"Btn"answers"Btn2"不同。
当我点击1和2时,它们都打开了第1周和第2周的相同文本
你看到相同内容的原因是因为你的目标是相同的模态:
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "block"; <--- should be modal2
}
尝试为模态添加data属性。你需要相同的id
在你的模态与相同的data-target
按钮
交货
<!-- MODAL INFORMATION FOR WEEK 1 -->
<div id="myModalA" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><h2><font color="black">Week 1</font></h2></p>
<div class="modal-body">
<p><font color="black"> ex1</p>
</div>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><h2><font color="black">Week 2</font></h2></p>
<p><font color="black"> Example 1 </p>
</div>
</div>
<li type="button" id="myBtn" class="w3-hide-small w3-center" data-target="myModalA"><a href="#" class="w3-hover-white">1</a></li>
<li type="button" id="myBtn2" class="w3-hide-small w3-center" data-target="myModal2"><a href="#" class="w3-hover-white">2</a></li>
相关文章:
- 打开一个模态并将其链接到AngularJS中的指令
- bootstrap消除模态并显示另一个模态
- 包括来自另一个页面的Boostrap模态;t验证表单
- 使用一个 jquery 代码关闭多个模态
- Angularjs - 观察模态窗口从另一个控制器关闭
- angularJS,一个部分或模态通知,加载几秒钟后就会消失
- 如何将一个模态放在一边-显示其他模态(像..这样的向导)
- 当你有很多文本框时,如何从一个模态中只填充一个文本框
- 将数据从一个模态发送到另一个模态
- 从模态内部的主体复制一个谷歌地图
- 我可以点击一个带硒的模态上的按钮吗
- 创建一个模态指令,并将click事件绑定到angular js中
- 如何将iFrame与带有'#'在一个简单的模态框中
- 显示模态对话;在 IE 中打开一个新窗口
- 我开发了一个api,我希望它重定向到其他php页面,并在我点击api文件中的按钮时弹出模态
- 打开一个模态(在Codeigniter中),该模态从依赖于phpvar的URL加载(在iframe中)内容
- 创建一个模态窗口以使用 AngularJS 加载数据
- 引导多个模态关闭所有与最后一个模态
- 在 JSP 中设置一个值,从 javascript 传递给 JSTL 的模态
- 多个模态一个脚本