Question

我在我的网站上创建了一个弹出框。

我将弹出框添加到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 &nbsp; :) </p>
</div>
<div class="modal-footer">
<h3 align="center">SUPP Software LTD.</h3>
</div>
</div>
</div>
</div></footer>

Answer 1

所有按钮上都有相同的ID。 document.getElementById始终只返回一个元素。 ID必须是唯一的。将其更改为类并将事件绑定到document.getElementsByClassName

返回的每个元素

Answer 2

如果您为所有按钮提供了myBtn的ID，那么它会失败，因为您正在设置btn = document.getElementById('myBtn')，它正在查找ID为{{的第一个元素1}}。做爱德华所说的1.使用一个类，因为元素不是唯一的，2。使用myBtn检索所有元素而不是一个元素。

Answer 3

示例1：

带有班级名称，

＆＃13;

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

＆＃13;

示例2：

与Id，

＆＃13;

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

＆＃13;

Javascript弹出框

3 个答案: