如何将点击的视频块打开为弹出模式? [英] How to open a clicked video block to a pop modal?

问题描述

我有一个侧边栏，用于显示JSON文件中的电影列表，在这里看起来很直观.

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 open a popup modal with a movie block, something like this.

这里有sif现场演示jsfiddle:实时演示

Here si live demo jsfiddle: live demo

这是我到目前为止尝试过的

Here is what I have tried so far

HTML

<ul class="sidebar">
</ul>

<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
    </div>

</div>

这是js

$(function() {
        var movies = [{
                        "title": "travel",
                        "left": 201,
                        "top": 209,
                        "movieid": "10",
                        "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
                        "buttons": [{
                                "left": 81,
                                "top": 51,
                                "start_time": 1,
                                "end_time": 2,
                                "buttonid": "10_1",
                                "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
                        }]
                },
                {
                        "title": "ecommerce",
                        "movieid": "20",
                        "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
                        "buttons": [{
                                "left": 0,
                                "top": 0,
                                "start_time": 1,
                                "end_time": 2,
                                "width": '200',
                                "height": '60',
                                "buttonid": "20_1",
                        }]
                }
        ];

        function formatTitle(t) {
                var nt = t[0].toUpperCase();
                nt += t.slice(1);
                return nt;
        }

        function makeListItem(v, p) {
                var li = $("<div id='" + v.movieid + "' class='sidebar_movie-block'>");
                var title = $("<h1>", {
                        class: "title",
                        for: "video_" + v.movieid
                }).html(formatTitle(v.title)).appendTo(li);

                var edit = $("<span>", {
                        class: "block-edit fa fa-edit",
                        for: "video_" + v.movieid,

                }).appendTo(li);
                var vObj = $("<video>", {
                        id: "video_" + v.movieid,
                        src: v.movie_url
                }).appendTo(li);
                li.appendTo(p);
        }

        function getVideoList() {
                $.each(movies, function(index, dataValue) {
                        makeListItem(dataValue, $(".sidebar"));
                });
        }

        getVideoList();



        var modal = $("#myModal");

        // When the user clicks the button, open the modal 
        $(".block-edit").on("click", function() {
                $("#myModal").css("display", "flex");

        })

        // When the user clicks on <span> (x), close the modal
        $(".close").on("click", function() {
                $("#myModal").css("display", "none");
        })

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

});

单击编辑"后，我被困在流行模式中显示电影，我尝试了不同的方法，但不幸的是没有主意.

I am stuck to display the movie inside a pop modal after I click edit, I tried different ways but unfortunately am out of ideas.

我需要更改以获得我想要的东西吗?任何建议或帮助将不胜感激

What do I need to change to get what I want? any suggestion or help will be apreciated

推荐答案

抱歉，布局，但我所做的只是为模式关闭按钮添加了一个兄弟元素，名为"modalVideo"，为标题添加了另一个名为"modalTitle"的元素:

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

如果要切换到按钮的单击，只需将$("video")更改为 所需元素.

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

以下是提琴手链接: https://jsfiddle.net/z4v18y3g/

标题为: https://jsfiddle.net/z4v18y3g/2/

这篇关于如何将点击的视频块打开为弹出模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！