javascript关闭按钮不起作用

我想关闭我的模式，但它不关闭。如果我点击按钮关闭模式，整个页面重新加载。我怎样才能解决这个问题。javascript关闭按钮不起作用

这里我的代码： -

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

普莱舍帮助我谢谢

来源

2016-12-23 khalidh

你所说的 “亲密重新加载整个页面” 是什么意思？ –

试着控制你的'span'变量的值。检查选择器是否正确。 – karan3112

关闭开放模式@FlyingGambit – khalidh

试运行这..

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>

来源

2016-12-23 06:54:35 Sarath

javascript关闭按钮不起作用

回答

相关问题