模态在 codepen 上打开得很好，但在 shopify 上却不行

Question

我花时间为我的 Shopify 商店编写了一个不错的尺码表，并在 codepen, but when I dropped all the code into Shopify 上找到了我想要的所有东西，它打不开，我确定这是一个 javascript 问题，但是我什至不知道从哪里开始看。

任何 help/guidance 将不胜感激。

谢谢。

////// html //////

<div class="product-info__size-chart-line">
  <div class="product-info__size-chart" data-size-chart-handle="size-guide"><button id="myBtn" type="button" class="product-info__size-chart-link">Size Chart</button>
   </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <div id="kotp-size-chart">

    <h2>Men's T-Shirt <br> Size Chart</h2>

      <table class="table kotp-size-chart-table">
        <thead class="">
        </thead>
        <tbody>
          <tr>
            <th rowspan="2">Size</th>
            <th colspan="2">Width</th>
            <th colspan="2">Length</th>
          </tr>
          <tr>
            <td class="incm-header">in</td>
            <td class="incm-header">cm</td>
            <td class="incm-header">in</td>
            <td class="incm-header">cm</td>
          </tr>
          <tr>
            <td class="sizes-header">S</td>
            <td>18</td>
            <td>46</td>
            <td>28</td>
            <td>71</td>
          </tr>
          <tr>
            <td class="sizes-header">m</td>
            <td>20</td>
            <td>51</td>
            <td>29</td>
            <td>74</td>
          </tr>
          <tr>
            <td class="sizes-header">l</td>
            <td>22</td>
            <td>56</td>
            <td>30</td>
            <td>76</td>
          </tr>
          <tr>
            <td class="sizes-header">xl</td>
            <td>24</td>
            <td>61</td>
            <td>31</td>
            <td>79</td>
          </tr>
          <tr>
            <td class="sizes-header">2x</td>
            <td>26</td>
            <td>66</td>
            <td>32</td>
            <td>81</td>
          </tr>
          <tr>
            <td class="sizes-header">3x</td>
            <td>28</td>
            <td>71</td>
            <td>33</td>
            <td>84</td>
          </tr>
          <tr>
            <td class="sizes-header">4x</td>
            <td>30</td>
            <td>76</td>
            <td>34</td>
            <td>86</td>
          </tr>
          <tr>
            <td class="sizes-header">5x</td>
            <td>32</td>
            <td>81</td>
            <td>35</td>
            <td>89</td>
          </tr>

        </tbody>
      </table>

    </div>
    
  </div>

</div>

////// js //////

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Answer 1

你的脚本标签有问题，它没有将脚本添加到网站。您需要检查标签并使用液体标签script_tag。详细了解 script_tag

{{ 'size-chart-modal.js' | asset_url | script_tag }}

模态在 codepen 上打开得很好，但在 shopify 上却不行

modal opens just fine on codepen, but not on shopify

javascript

modal-dialog

bootstrap-modal

shopify