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


Solution 1:[1]

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');
        }
    })

Solution 2:[2]

You are creating the same modal several times within that while loop, but every modal has the same id (myModal). ID's need to be unique, otherwise Javascript will fail or behave erratically when you manipulate that element.

The solution is to create different ID for each modal, for example.

<div id="myModal_<a video ID for example>" class="modal">

You will need to amend the Javascript accordingly to call the correct modal.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 daveisthewave
Solution 2 kissumisha

Related Questions