W3多个模态在同一页面中-页面刷新

Question

I'm trying repurpose W3 image modal code to open multiple modals in the same page. I hacked together a solution from answers here but it only works if I refresh the browser page (sigh).

I have so much time into this and just can't get it... Any help would be crazy appreciated. Thanks in advance!!!

HTML (shows first instance, then following instances):

    <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

Do not understand your code properly. But what i understand is that you went to display image inside the #myModal when you click on the ui img. If my understand is correct then this should work;

<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

Thanks so much for the reply! A friend actually go it working. I needed to add the js to the index page (all pages actually) because of AJAX. And I updated the js to:

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

I think the close the modal js code is still off, Chrome js console throws this error: "Uncaught TypeError: Cannot set property 'onclick' of undefined"