W3多個模態在同一頁面中-頁面刷新

Question

我正在嘗試重新利用W3圖像模態代碼以在同一頁面中打開多個模態。 我從這里的答案中獲得了一個解決方案，但只有在刷新瀏覽器頁面時（嘆氣）它才有效。

我花了很多時間來做這件事，但是無法獲得任何幫助，我將不勝感激。 提前致謝！！！

HTML（顯示第一個實例，然后顯示以下實例）：

    <div class="two-column"> <br>
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-YieldSense.jpg" width="100%">

        <!-- The Modal -->
        <div id="myModal" class="modal">
            <!-- Modal Content (The Image) -->
            <img class="modal-content" id="img01">
        </div>
    <!-- End Pop-Up -->

    </div>

    <div class="clear"></div>


</div>

<ul class="portfolio-grid">

    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]"> 
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-vDrive.jpg"> 
    <!-- End Pop-Up --> 
    </li>

    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]"> 
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-STube.jpg"> 
    <!-- End Pop-Up --> 
    </li>

    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]"> 
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-AD-CS.jpg"> 
    <!-- End Pop-Up --> 
    </li>

</ul>

JAVASCRIPT：

<script>
// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal

var img = $('.myImg');
var modalImg = $("#img01");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
});

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

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

Answer 1

不正確地理解您的代碼。 但是我了解的是，當您單擊ui img時，您已在#myModal內部顯示圖像。 如果我的理解是正確的，那應該行得通；

<script type="text/javascript">
    $(function () {

        $('.myImg').click(function () {

                var newSrc = this.src;
                $("#img01").attr('src', newSrc);
            });

        // When the user clicks on <span> (x), close the modal
        $('#myModal').click(function () {
            var modal = this;
            var img = $('.myImg');
            var modalImg = $("#img01");

            modal.style.display = "none";
        });
            });
    </script>

Answer 2

非常感謝您的回復！ 一個朋友實際上去工作了。 由於AJAX，我需要將js添加到索引頁面（實際上是所有頁面）。 我將js更新為：

<script>
// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal

var img = $('.myImg');
var modalImg = $("#img01");
$("body").on("click",'.myImg', function(event){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
});

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

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

我認為關閉模態js代碼仍處於關閉狀態，Chrome js控制台拋出此錯誤：“未捕獲的TypeError：無法設置未定義的屬性'onclick'”