Codepen正常运行的Modal部署到Shopify后无法打开求排查方案

排查步骤与解决方案 #

• 优先检查JS执行时机问题
  你当前的JS代码会在浏览器加载到对应位置时立即执行，如果你的代码放在页面头部、或者放在对应HTML元素的前面，代码运行时按钮、模态框元素还没渲染完成，document.getElementById会返回空值，点击事件自然绑定失败。
  解决方法：把所有JS代码包裹在DOM加载完成的监听事件里，示例如下：

  document.addEventListener('DOMContentLoaded', function() {
    // 把你原来的所有JS代码放在这里面
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    
    btn.addEventListener('click', function() {
      modal.style.display = "block";
    })
    
    span.addEventListener('click', function() {
      modal.style.display = "none";
    })
    
    window.addEventListener('click', function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    })
  })
  

• 检查ID冲突问题
  Shopify主题本身通常自带很多内置元素和功能，很可能已经有其他元素使用了myBtn、myModal这类通用ID，导致你拿到的元素不是自己写的尺码表相关元素。
  解决方法：给你的元素换唯一、辨识度高的ID，比如把按钮ID改成kotp_size_chart_btn，模态框ID改成kotp_size_chart_modal，修改后同步更新JS里对应的ID选择器即可。
• 检查事件绑定被覆盖问题
  你原来用的btn.onclick = function(){}属于DOM0级事件绑定，如果主题里其他后续执行的JS代码也给同一个按钮绑定了onclick事件，会直接覆盖你写的逻辑。
  解决方法：改用addEventListener绑定事件（上面的示例代码已经做了修改），这种方式可以给同一个元素绑定多个同类型事件，不会互相覆盖。
• 快速调试方法
  打开Chrome/Firefox浏览器的开发者工具（F12），切换到控制台标签，先输入document.getElementById('myBtn')回车，看返回的是不是你写的尺码表按钮元素；再点击尺码表按钮，看控制台有没有抛出JS错误，根据报错信息可以快速定位问题。
• 额外注意CSS优先级问题
  如果你确认JS已经成功给模态框设置了display: block但还是看不到模态框，大概率是主题里的.modal类有更高优先级的样式（比如display: none !important）覆盖了你的行内样式，给模态框加更具体的选择器或者直接修改样式为modal.style.display = "block !important"即可解决。

内容的提问来源于stack exchange，提问作者JStormThaKid