javascript关闭按钮不起作用

Question

I am trying to close my modal, but it is not closing. If I click on button to close modal, the whole page reloads. How can I fix this.

Here my code:-

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

Here model:-

 <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>

Here my script:-

<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> 

Plese help me thank you

Answer 1

try running this ..

 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>