javascript Close button not working
<p>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.    </p>

<p>Here my code:- </p>

<pre><code>  &lt;button id="myBtn2"&gt;Read more&lt;/button&gt;
  &lt;span class="more"&gt;&lt;/span&gt;
</code></pre>

<p>Here model:-  </p>

<pre><code> &lt;div id="myModal2" class="modal"&gt;

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

  &lt;/div&gt;
</code></pre>

<p>Here my script:- </p>

<pre><code>&lt;script&gt;
  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";
  }
  }
  &lt;/script&gt; 
</code></pre>

<p>Plese help me thank you</p>