Question

我已经创建了一个代码，如果我单击它应该弹出模式框的按钮，但它无法正常工作

    <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

您在s的电话中错过了getElementByClassName。它应该是getElementsByClassName。

此外，请查看您将事件监听器分配给onClick vs onclick的位置。属性名称为onclick，区分大小写。

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

就像约翰尼提到的那样，检查控制台是否存在错误总是一个好主意，这至少会让你成为第一个问题。

Answer 2

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

正如约翰尼指出的那样，你还需要小心套管。 onclick事件将无法正常运行。它应该是btn.onclick = function()，而不是btn.onClick = function()。

Answer 3

我已更新您的小提琴，检查并找到差异Updated Fiddle

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

，我已经评论过代码作为您的主要代码是打开模态。

然后，您的onClick应更改为onclick。此外，您的<button>正在尝试提交表单，因此我还添加了一个新按钮来查找差异。

Answer 4

你有几个人告诉你如何修复你已经拥有的模态框，所以我想我会告诉你如何做出不同的排序，根本不需要Javascript。

.modal-state {
  display: none;
}
.modal-body {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 400ms cubic-bezier(.24,.34,.12,.89);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}
.modal-state:checked ~ .modal-body {
  opacity: 1;
  pointer-events: auto;
}
.modal-outside {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 0;
}
.modal-inside {
  padding: 15px 10px 10px 10px;
  background: #EFEFEF;
  border-radius: 3px;
  max-width: 80%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 1;
}
.modal-footer {
  margin-top: 10px;
  text-align: right;
}
/* pretty span buttons */
.button {
  background-color: tomato;
  border: none;
  border-radius: 3px;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

<input id="modal-state" type="checkbox" class="modal-state">
<div class="modal-body">
  <label class="modal-outside" for="modal-state"></label>
  <div class="modal-inside">
    This is an example of a modal box using CSS only. You'd be supprised how easy it is to do. Just a few lines (42 lines of CSS) and no need for any JS, though you can still use it if you like.
    <br>
    <br>
    <b>Open:</b>
    <br>document.querySelector('.modal-state').checked = true
    <br>
    <b>Close:</b>
    <br>document.querySelector('.modal-state').checked = false
    <br>
    <b>Toggle:</b>
    <br>document.querySelector('.modal-state').checked = !document.querySelector('.modal-state').checked
    <br>
    <div class="modal-footer">
      <hr>
      <label for="modal-state"><span class="button">Close</span>
      </label>
    </div>
  </div>
</div>


<label for="modal-state"><span class="button">Open</span>
</label>

这使用一个名为.modal-state的隐藏复选框来存储模态框是否打开。

您可以使用for属性设置为ID modal-state复选框的标签，作为从任何地方更改状态的方法。

如果你愿意，可以用JS触发它，我在示例中包含了这些命令。

我希望你觉得这很有用，或者至少很有趣。

按钮没有弹出模式框？

4 个答案: