Javascript弹出框
Javascript弹出框
提问于 2016-06-28 23:30:52
我在我的网站上创建了一个弹出框。
我将弹出框添加到3个单独的按钮，由于某些原因，弹出框只适用于第一个按钮。
我删除了第一个按钮上的id标签: id="myBtn“，然后弹出窗口在我的第二个按钮上工作，但仍然不能在我的第三个按钮上工作
在弹出框中，我也希望有一个链接，将用户定向到联系人表单，当用户点击该链接时，弹出窗口应该关闭。
以下是javascript代码：
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}下面是html代码：
<footer class="panel-footer"><div class="btn btn-block btn-lg btn-default"><button id="myBtn">Sign up now</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2><img src="http://localhost:8383/homepage/img/logo.png" style="width:250px"></h2>
</div>
<div class="modal-body">
<p>Please contact us via the <a href="#">contact form</a> as our sign up system is currently under construction</p>
<p>Sorry for any inconvenience :) </p>
</div>
<div class="modal-footer">
<h3 align="center">SUPP Software LTD.</h3>
</div>
</div>
</div>
</div></footer>回答 3
Stack Overflow用户
发布于 2016-06-28 23:35:08
您在所有按钮上具有相同的ID。document.getElementById始终只返回一个元素。ID必须是唯一的。将其更改为类，并将事件绑定到document.getElementsByClassName返回的每个元素
Stack Overflow用户
发布于 2016-06-28 23:36:55
如果你给所有的按钮一个id为myBtn，那么它失败是有道理的，因为你设置了btn = document.getElementById('myBtn')，它会找到第一个id为myBtn的元素。
Stack Overflow用户
发布于 2016-06-28 23:49:14
示例1：
使用类名，
<html>
<head>
<title></title>
</head>
<body>
<button class="b">Button1</button>
<button class="b">Button2</button>
<button class="b">Button3</button>
<script>
var btn = document.getElementsByClassName("b")[0];
btn.addEventListener("click",function(){
alert("Button1");
})
var btn = document.getElementsByClassName("b")[1];
btn.addEventListener("click",function(){
alert("Button2");
})
var btn = document.getElementsByClassName("b")[2];
btn.addEventListener("click",function(){
alert("Button3");
})
</script>
</body>
</html>
示例2：
有了Id，
<html>
<head>
<title></title>
</head>
<body>
<button id="btn1">Button1</button>
<button id="btn2">Button2</button>
<button id="btn3">Button3</button>
<script>
var btn = document.getElementById("btn1");
btn.addEventListener("click",function(){
alert("Button1");
})
var btn = document.getElementById("btn2");
btn.addEventListener("click",function(){
alert("Button2");
})
var btn = document.getElementById("btn3");
btn.addEventListener("click",function(){
alert("Button3");
})
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38080434
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号