单击滑块按钮上的Javascript视频弹出窗口

Javascript video popup on click slider button

本文关键字：视频 窗口 Javascript 按钮 单击      更新时间：2023-09-26

我正在尝试运行一个脚本，其中..滑块 URL 为 #，滑块按钮的名称为"slide_8"。当有人点击它时，会弹出一个YouTube视频。在我下面的脚本中，视频正在播放，但在浏览器上的任何地方都看不到。我把youtube网址保留在javascript中。

<div class="overlay" style="display: none;"></div>
<div class="propose-video-wrap" style="display: none;"> 
<div id="propose_video"></div> 
</div> 
<script type="text/javascript">
$('#slide_8').click(function() {
    var video_htm = '<a class="pop-close-btn" onclick="closeVideoPopup();"></a> <iframe id="propose_video_iframe" width="300" height="150" src="//www.youtube.com/embed/SQtxJ15vzOU?rel=0&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>';
    $('#propose_video').html(video_htm);
    $('.overlay').css('display', 'block');
    $('.propose-video-wrap').css('display', 'block');
    $('body').css('overflow-y', 'hidden');
});
function closeVideoPopup() {
    $('.overlay').css('display', 'none');
    $('.propose-video-wrap').css('display', 'none');
    $('#propose_video').html('');
    $('body').css('overflow-y', '');
}
</script>

我把这段代码粘贴到JSfiddle中，添加一个按钮，它可以工作。我所做的唯一更改是添加一个事件侦听器以单击关闭按钮，因为由于某种原因，内联在 JSfiddle 上不起作用，以及在关闭按钮内插入一些文本，因此可以单击它。

问题可能出在您的样式上，例如，您的任何元素都具有负 z 索引或以奇怪的方式定位。禁用 display: none 属性并首先在这些 HTML 元素中插入一些文本，然后查看它们的最终位置。

如果你想看看我最终得到了什么，这里是。

相关文章：