Help with JavaScript

Design help Custom code
1

Hello! I’m working on a video gallery with modals, and I’ve found a solution to open the modal and enable autoplay with audio using the following code here.

 <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

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

        // When the user clicks the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block"
            document.getElementById('myVideo').play(); // <-- PLAY
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
            document.getElementById('myVideo').pause(); // <-- PAUSE
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
                document.getElementById('myVideo').pause(); // <-- PAUSE
            }
        }
    </script>

I have 3 modals, but currently, it only works with one of them. The project is local and should be in HTML5, without using CMS.

Thank you!

2

I guess you just need to repeat the same process for other modals:

...
var modal = document.getElementById("myModal-2");
...

I don’t know how are your elements structured but you should probably reference related controls from the modal node…i.e.:

....
var btn = modal.querySelector(...some-css-selector...);
...

P.

3

Something like this @Peter.DipPark? It’s not working :\

<script>
        // Get the modal
        var modal = document.getElementById("myModal");
        var modal = document.getElementById("myModal-2");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");
        var btn = document.getElementById("myBtn-2");

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

        // When the user clicks the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block"
            document.getElementById('myVideo').play(); // <-- PLAY
            document.getElementById('myVideo-2').play(); // <-- PLAY
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
            document.getElementById('myVideo').pause(); // <-- PAUSE
            document.getElementById('myVideo-2').pause(); // <-- PAUSE

        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
                document.getElementById('myVideo').pause(); // <-- PAUSE
                document.getElementById('myVideo-2').pause(); // <-- PAUSE
            }
        }
    </script>
4

Can you share ready-only and/or published link so I can point you to the right direction… :person_with_white_cane:

5

The reason that it works only on one is that you do not grab all “modals” and it returns only the last one. Another issue is that you are getting modals by id but in the first example you are getting only one in the second example you are getting two but it would not work either and it is not DRY anyway.

You need to grab them all(eg. with class) and on each apply your events. Something like that:

const modals = Array.from(document.querySelectorAll(".myModal"));

modals.forEach(modal => {
// do your stuff for modal like grab element inside an add event listener etc.
}

This is a false statement in your code you are giving instructions if target IS modal and not if target is NOT modal.

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
  // Do stuff
            }
        }

You are missing ! before the weak equality check. So your equality check should look like this if event.target !== modal than hide modal

Good luck

6

Hello! It finally works. I’ll be sharing the project soon on “Made in Webflow” :slight_smile:

I’ve used the following code:

<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var modal1 = document.getElementById("modal1");
    var modal2 = document.getElementById("modal2");
    var close1 = document.getElementById("close1");
    var close2 = document.getElementById("close2");
    var video1 = document.getElementById("video1");
    var video2 = document.getElementById("video2");

    btn1.onclick = function() {
      modal1.style.display = "block";
      video1.currentTime = 0;
      video1.play();
    };

    btn2.onclick = function() {
      modal2.style.display = "block";
      video2.currentTime = 0;
      video2.play();
    };

    close1.onclick = function() {
      modal1.style.display = "none";
      video1.pause();
      video1.currentTime = 0;
    };

    close2.onclick = function() {
      modal2.style.display = "none";
      video2.pause();
      video2.currentTime = 0;
    };
</script>