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