JavaScript 弹出框

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 必须是唯一的。将其更改为类并将事件绑定(bind)到 document.getElementsByClassName

返回的每个元素