How can I make one function to close modals with different content in JS

by

I have three modals containing a video. Each button opens the same modal but it shows a different video depending on the buttom you clicked. It works fine, but I want to shut off the sound when closing the modal. There is a function to do that named closeVideo(), but it only works for the first modal, and not for the others.
Is there a way to create just one function to shut off the sound of every modal?


<div class="modal">
  <div class="modal-content">
    <span class="btn-close" (click)='closeVideo()'>
        <img src="../../../../../assets/img/close.svg" alt="close">
    </span>
        <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/N8ABAZvh8WE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

<div class="modal">
  <div class="modal-content">
    <span class="btn-close" (click)='closeVideo()'>
        <img src="../../../../../assets/img/close.svg" alt="close">
    </span>
        <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/rn937OyA00g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

<div class="modal">
  <div class="modal-content">
    <span class="btn-close" (click)='closeVideo()'>
        <img src="../../../../../assets/img/close.svg" alt="close">
    </span>
        <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/EUjWFr3w7RU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>



  closeVideo(){
    let myPlayer = document.getElementById('player');
    myPlayer.setAttribute("src", " ");
    console.log('video is closed now!');
  }

15 thoughts on “How can I make one function to close modals with different content in JS”

  1. you can perform the following function in JavaScript

    $(function(){
  $('.modal').hide();
});

    o

    guardarlos en una variable y posteriormente recorrer esa variable y cerrar uno a uno

    $(function(){
     var arrayModals=$('.modal');
     for(var modalObj:arrayModals){
        //do stuff here
        $(document.find(modalobj).getId()).toggleClass('visible');
     }
}):

    only do it in the event you want either by clicking or detecting the end of a video

    Reply

Leave a Comment