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> 

pleseは私はあなたに

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>