JavaScript弹出框
[英]Javascript pop up box
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
问题描述
我在网站上创建了一个弹出框。
我将弹出框添加到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 条回复
1楼 Eduard Void 1 2016-06-28 15:35:07
您在所有按钮上都具有相同的ID。 document.getElementById始终仅返回一个元素。 ID必须是唯一的。 将其更改为类，并将事件绑定到document.getElementsByClassName返回的每个元素
2楼 Jordan 0 2016-06-28 15:36:55
如果您为所有按钮指定了myBtn的ID，则它会失败是有道理的，因为您正在设置btn = document.getElementById('myBtn') ，这将找到ID为myBtn的第一个元素。 请执行Eduard所说的：1.使用一个类，因为元素不是唯一的；并且2.使用document.getElementsByClassName检索所有元素，而不仅仅是检索一个元素。
3楼 Ehsan 0 2016-06-28 15: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>
问题未解决？试试搜索： JavaScript弹出框。
这个用于编辑图像的javascript弹出框可在Firefox和chrome中使用，但在Internet Explorer中不会显示弹出框
[英]this javascript pop up box for edit images works in firefox and chrome but not shows pop up box in Internet explorer
在模式框/弹出窗口中查看值-HTML，JavaScript，PHP和JavaScript
[英]Viewing values in modal box/pop up - HTML, JavaScript, PHP and JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.