Skip to content Skip to sidebar Skip to footer

How To Open A Clicked Video Block To A Pop Modal?

I have a sidebar which displays the list of movies from a JSON file, here si visual how it looks. Now I want when a user clicks edit button one of the movie in a list it should op

Solution 1:

Sorry for the layout, but all I did was add a brother element of the modal close button called "modalVideo" and another called "modalTitle" for title:

<ul class="sidebar">
</ul>
<div id="myModal" class="modal">
   <!-- Modal content -->
   <div class="modal-content">
        <h1 id="modalTitle"></h1>
        <span class="close">&times;</span>
        <div id="modalVideo">
        </div>
   </div>                              
</div>

I added this function, which is triggered in the click of the video and adds it in the modal.

$("video").on("click", function(cls){
    $("#myModal").css("display", "flex");
    //get video tag and put into modal.
    $("#modalVideo")[0].innerHTML = cls.target.outerHTML
})

If you want to switch to the click of the button, just change the $("video") to desired element.

Here is the fiddler link: https://jsfiddle.net/z4v18y3g/

[EDIT]

New fiddler with title: https://jsfiddle.net/z4v18y3g/2/


Post a Comment for "How To Open A Clicked Video Block To A Pop Modal?"