Javascript 如何将单击的视频块打开到弹出模式？

我有一个侧边栏，显示JSON文件中的电影列表，这里是它的外观

现在我想，当用户点击编辑按钮时，列表中的一个电影应该会打开一个带有电影块的弹出模式，类似这样

这里是现场演示JSFIDLE：

这是我到目前为止所做的尝试

HTML

&时代；

这是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";
                }
        }

});

$（函数（）{
var电影=[{
“头衔”：“旅行”，
“左”：201，
“顶级”：209，
“电影ID”：“10”，
“电影url”：http://techslides.com/demos/sample-videos/small.mp4",
“按钮”：[{
“左”：81，
“top”：51，
“开始时间”：1，
“结束时间”：2，
“buttonid”：“10_1”，
“btn_url”：http://techslides.com/demos/sample-videos/small.mp4"
}]
},
{
“标题”：“电子商务”，
“电影ID”：“20”，
“电影url”：http://techslides.com/demos/sample-videos/small.mp4",
“按钮”：[{
“左”：0，
“顶部”：0，
“开始时间”：1，
“结束时间”：2，
“宽度”：“200”，
“高度”：“60”，
“buttonid”：“20_1”，
}]
}
];
函数格式标题（t）{
var nt=t[0]。toUpperCase（）；
nt+=t.slice（1）；
返回nt；
}
函数makeListItem（v，p）{
var li=$（“”）；
变量标题=$（“”{
类：“标题”，
对于：“视频”+v.movieid
}).html（格式标题（v.title））.appendTo（li）；
变量编辑=$（“”{
类：“块编辑fa edit”，
对于“视频”+v.movieid，
}).附件（李）；
var vObj=$（“”{
id:“视频”+v.movieid，
src:v.movie\u url
}).附件（李）；
li.附录（p）；
}
函数getVideoList（）{
$.each（电影、函数（索引、数据值）{
makeListItem（数据值，$（“.sidebar”）；
});
}
getVideoList（）；
var模态=$（“#myModal”）；
//当用户单击该按钮时，打开模式对话框
$（“.block edit”）。在（“单击”，函数（）{
$（“#myModal”）.css（“display”、“flex”）；
})
//当用户单击（x）时，关闭模式对话框
$（“.close”）。在（“单击”，函数（）{
$（“#myModal”）.css（“显示”、“无”）；
})
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
});

我被困在一个弹出模式显示电影后，我点击编辑，我尝试了不同的方式，但不幸的是我的想法

---

我需要改变什么才能得到我想要的？任何建议或帮助都将受到感谢

对不起，我只是在模式关闭按钮中添加了一个名为“modalVideo”的兄弟元素和另一个名为“modalTitle”的标题元素：

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

如果要切换到单击按钮，只需将

$（“视频”）

更改为 所需元素

以下是fiddler链接：

[编辑]

---

标题为的新提琴手：

嗨，达米安，当我测试你的提琴时，它只显示视频，标题如何？哦，等一下，我已经在模式中添加了另一个div，名为“modalTitle”，如果它能工作，通知我，我将添加到回答对不起，达米安，当我将选择器从$（'video'）更改为

$（'block edit

）仅显示模式，不带视频和标题，仅当selecto为$（'video'），：（此处是链接，此处是代码，我刚刚删除了“video”事件，并添加一些代码到按钮点击事件，看一看：抱歉错过评论，我现在没有杂种时间：/您可能会考虑使用jQuery UI对话框来包含电影项目，并使用它的模态。

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

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