javascript 关闭按钮不起作用

Question

我正在尝试关闭我的模式，但它没有关闭。如果我单击按钮关闭模式，整个页面将重新加载。我怎样才能解决这个问题。

这是我的代码:-

  <button id="myBtn2">Read more</button>
  <span class="more"></span>

这里的模型:-

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

  <!-- Modal content -->
  <div class="modal-content">
  <span class="close">&times;</span>
  <img src="images/abcd.jpeg" style="width:300px;margin:5px; padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  <img src="images/aaa.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  <img src="images/bbb.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  <img src="images/ccc.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  </div>

  </div>

这是我的脚本:-

<script>
  var modal = document.getElementById('myModal2');
  var btn = document.getElementById("myBtn2");
  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";
  }
  }
  </script> 

请帮帮我，谢谢

Answer 1

尝试运行这个..

var modal = document.getElementById('myModal2');
var btn = document.getElementById("myBtn2");
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";
  }
}

.close{
    float: right;
    cursor: pointer;
}
.modal{
     max-width: 150px;
}

<button id="myBtn2">Read more</button>
<span class="more"></span>


<div id="myModal2" class="modal" style="display:none;">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close"><b>&times;</b></span>
    <img src="images/abcd.jpeg" style="width:300px;margin:5px; padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
    <img src="images/aaa.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
    <img src="images/bbb.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
    <img src="images/ccc.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  </div>
</div>