Modal within a php while loop EDIT: how to close modal

Okay so basically I have a modal that is within a while loop that is pulling in post data for a video link. The issue is that it only works for the first video and I understand that it’s because that is what loads first. I want to know how I can get it to work for all videos in the loop. Maybe using some type of data-src attribute? not sure.. any help would be great.

if ($the_query->have_posts()) {
        while ($the_query->have_posts()) : $the_query->the_post();
        $postid = get_the_ID();
        ?>

<div id="myBtn" class="week-episode-watch-now myBtn">Coming Soon!!</div>

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


            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <video id="commingSoonVid" controls="" preload="metadata" poster="" autoplay="" style="visibility: visible;">
                    <source src="<?php echo get_post_meta($postid, 'video_file', true);  ?>" type="video/mp4">
                </video>
            </div>

        </div>

<?php endwhile;
    } 

<script>



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

    // Get the button that opens the modal
    var elements = document.getElementsByClassName('myBtn');

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

    // When the user clicks the button, open the modal
    for (var i = 0, length = elements.length; i < length; i++) {
        elements[i].onclick = function(event) {
            modal.style.display = 'block';
        };
    }


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

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
            $('video').trigger('pause');
        }
    }
</script>

EDIT: I have made some changes and updates.. My question is slightly different now. Basically all i need to know now is how do I close the modal when user clicks outside of my modal?

<div id="myBtn" class="week-episode-watch-now myBtn" data-toggle="modal" data-target="#videoModal" data-theVideo="<?php echo get_post_meta($postid, 'video_file', true);  ?>">Coming Soon</div>

   <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div>
                    <video class="size" id="commingSoonVid" controls="" preload="metadata" poster="" autoplay="" style="visibility: visible;">
                        <source src="" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    modalFunction();
    function modalFunction() {
        var trigger = $("body").find('[data-toggle="modal"]');
        trigger.click(function () {
            var theModal = $(this).data("target"),
                videoSRC = $(this).attr("data-theVideo"),
                videoSRCauto = videoSRC + "?autoplay=1";
            $(theModal + ' video').attr('src', videoSRCauto);
            $(theModal).show();
            $(theModal + ' button.close').click(function () {
                $(theModal + ' video').attr('src', videoSRC);
                $(theModal).hide();
                $('video').trigger('pause');
            });
        });
    }

</script>

Answer

Hello everyone I figured out my own issue. If you are interested here is the final script i ended up going with here took em HOURS to figure out….

modalFunction();
    function modalFunction() {
        var trigger = $("body").find('[data-toggle="modal"]');
        trigger.click(function () {
            var theModal = $(this).data("target"),
                videoSRC = $(this).attr("data-theVideo"),
                videoSRCauto = videoSRC + "?autoplay=1";
            $(theModal + ' video').attr('src', videoSRCauto);
            $(theModal).show();
            $(theModal + ' button.close').click(function () {
                $(theModal + ' video').attr('src', videoSRC);
                $(theModal).hide();
                $('video').trigger('pause');
            });
        });
    }
    const modalOuter = document.querySelector('.modal')
    modalOuter.addEventListener('click', function(event){
        const isOutside = !event.target.closest('.size')
        if (isOutside){
            $('.modal').hide();
            $('video').trigger('pause');
        }
    })

Advertisement

Answer