模式未按预期方式打开

Question

我遵循了w3关于如何设置模式的指南，但当我按下按钮时，它不会为我打开，尝试了许多论坛，但所有类似的错误都与使用引导程序的人相关，如果有任何想法，将不胜感激

​

//let layerTemplate = template.querySelector(".item")
//modals
let modal = document.getElementById("myModal")
let btn = document.getElementById("myBtn")
let span = document.getElementsByClassName("close")[0]
//let x = "layer created by a variable"

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block"
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none"
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none"
  }
}

/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div class="rtb-sidebar-caption">Available Layers</div>
<div class="container">

  <form>
    <button onclick="layerCreator()" id="btnCreate" type="submit" class="miro-btn miro-btn--primary miro-btn--small" style=" font-size: 15px;">Add new Layer</button>
    <button onclick="deletionByIndex()" id="btnDelete" type="submit" class="miro-btn miro-btn--primary miro-btn--small" style="border: none; background-color: rgb(220,20,60); font-size: 15px;" onMouseOver="this.style.backgroundColor='#B22222'" onMouseOut="this.style.backgroundColor='#DC143C'">Delete Layer</button>
    <button id="myBtn">Open Modal</button>
  </form>

  <!-- Modal ----------------------------------------------->
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Name your new Layer: </p>
      <input placeholder="Type your desired layer name">
    </div>
  </div>
  <!--End of modal-->

</div>
<div class="miro-p-medium" style="padding: 5px; margin: 3px 0 0 14px; font-size: 20px;">
  <span id="displayLayer" class="item">Layer 1</span>
  <span id="displayLayer" class="item">Layer 2</span>
  <span id="displayLayer" class="item">Layer 3</span>
  <span id="displayLayer" class="item">Layer 4</span>
</div>

​

某些代码可能与模式创建/打开无关，请忽略该模式是更大项目的一部分。

Answer 1

@sami保持短时间打开的原因是，当您单击打开模式按钮时，由于表单被提交，页面正在重新加载。

有两种解决方案：

将type="button"添加到按钮本身：

<button type="button" id="myBtn">Open Modal</button>

或者将preventdefault添加到事件处理程序中：

btn.onclick = function(e) {
  e.preventDefault();
  modal.style.display = "block"
}