html代码实现弹框无法关闭

HTML代码实现弹框是很常见的，但有时候会遇到弹框无法关闭的情况，以下是一些可能导致问题的代码。

// 弹框HTMLdiv class="modal">
      div class="modal-content">
        span class="close">
    ×/span>
        p>
    弹框内容/p>
      /div>
    /div>
    // JavaScript代码var modal = document.querySelector('.modal');
    var btn = document.querySelector(".open-modal");
    var span = document.querySelector(".close");
btn.onclick = function() {
      modal.style.display = "block";
}
span.onclick = function() {
      modal.style.display = "none";
}
    

以上代码是典型的弹框代码，但是有时候可能出现无法关闭的情况，这可能是由以下几种原因导致。

1. 没有绑定.close元素的click事件

span class="close">
    /span>
    // JavaScript代码var modal = document.querySelector('.modal');
    var btn = document.querySelector(".open-modal");
btn.onclick = function() {
      modal.style.display = "block";
}
// close元素没有绑定click事件// 导致无法关闭弹框

2. 没有正确引入JavaScript文件

// index.html中没有引入JavaScript文件// 导致JavaScript代码无法执行

3. CSS代码中display属性被覆盖

.modal {
      display: none;
}
.show {
      // display属性被覆盖，导致无法关闭弹框  display: block !important;
}
    // JavaScript代码var modal = document.querySelector('.modal');
    var btn = document.querySelector(".open-modal");
    var span = document.querySelector(".close");
btn.onclick = function() {
      modal.classList.add('show');
}
span.onclick = function() {
      modal.classList.remove('show');
}
    

检查以上三种情况，可以解决弹框无法关闭的问题。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！