Question

按钮不弹出模态框？

2016-10-21

78

javascript html css

我创建了一个代码，如果我单击按钮，它应该弹出模式框，但它不起作用

    <form><br>
<h1 style="text-align: center; color:red;">LOGIN</h1>
    <input type="text" name="name" placeholder="NAME" id="name"><br><br>
    <input type="password" name="matrixno" placeholder="MATRIX NO" id="matrix"><br><br><br>
<button id="myBtn" style="cursor:pointer; margin-right: 4.5cm; padding: 7px 16px;">Submit</button>
</form>

<div id="modalBox" class="modal">

    <div class="modal-content">
      <span class="close">x</span>
         <p id="show"></p>
         <p id="show1"></p>
      <a href="page2.html" id="myBtn">Click me!</a>
    </div>
</div>

Answer 1

您在调用 getElementByClassName 时缺少 s 。它应该是 getElementsByClassName 。

此外，查看您将事件侦听器分配给 onClick 还是 onclick 的位置。属性名称为 onclick 并且区分大小写。

最后，您的按钮没有设置 type ，这意味着它将尝试提交表单。您可以通过几种方式防止这种情况，但最简单的（IMHO）是设置 type="button" 。

就像 Johnny 提到的那样，检查控制台是否有错误总是一个好主意，这至少会让您遇到第一个问题。

Answer 2

似乎有一个问题，您使用的是 document.getElementByClassName("close")[0] ，而不是 document.getElementsByClassName("close")[0] 。它是复数 - getElements - 而不是 getElement 。

正如 Johnny 指出的那样，您还需要注意大小写。onclick 事件将无法按您拥有的方式运行。它应该是 btn.onclick = function() ，而不是 btn.onClick = function() 。

Answer 3

我已经更新了你的小提琴，检查并找出区别更新的小提琴

首先检查代码，使用 document.getElementByClassName("close")[0] 而不是 document.getElementsByClassName("close")[0]

，我已经评论过该代码，因为你的主要目的是打开模式。

然后你的 onClick 应该更改为 onclick 。另外，你的 <button> 正在尝试提交表单，所以我还添加了一个新按钮来查找区别。