如何将单击的视频块打开到流行模式？

Question

我有一个侧边栏，它显示 JSON 文件中的电影列表，这里可以看到它的外观。现在我希望当用户单击列表中的某个电影的编辑按钮时，它应该打开一个带有电影块的弹出模式，就像这样。单击编辑后，我被困在弹出模式中显示电影，我尝试了不同的方式，但不幸的是我没有想法。我需要改变什么才能得到我想要的？任何建议或帮助将不胜感激

Answer 1

对不起布局，但我所做的只是添加一个名为“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>

我添加了这个功能，在视频的点击中触发并添加到模态中。

$("video").on("click", function(cls){

    $("#myModal").css("display", "flex");

    //get video tag and put into modal.

    $("#modalVideo")[0].innerHTML = cls.target.outerHTML

})

如果您想切换到单击按钮，只需将其更改$("video")为所需的元素即可。

这是小提琴手链接：https : //jsfiddle.net/z4v18y3g/

[编辑]

带有标题的新小提琴手：https : //jsfiddle.net/z4v18y3g/2/