Anonymous 发表于 2020-5-12 20:50:33

js大佬，这个视频弹窗怎么改点击×就关闭

本帖最后由 匿名 于 2020-5-12 20:54 编辑

这个js怎么改能实现点击右上角的×和其他空白处，实现关闭弹出窗，谢谢！目前这段代码，视频右上角的×，点了没反应

<div class="effect-wrapper">
        <div class="thumb">
                <img class="img-fullwidth" src="/static/images/video.jpg" alt="">
        </div>
        <div class="video-button">
        </div>
        <a class="hover-link videolist" ipath="/static/images/video.mp4" title="宣传视频"></a>
</div>
<div class="videos"></div>

         $('.videolist').each(function () { //遍历视频列表
            $(this).click(function () { //这个视频被点击后执行
                var video = $(this).attr('ipath');//获取视频路径
                $('.videos').html("<video id=\"aboutvideo\" style='width: 100%;' src='"+video+"' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"closel()\" class=\"vclose\" src=\"/static/images/close.png\"/>");
                $('.videos').show();
            });
      });
      function closel() {
            var v = document.getElementById('aboutvideo');//获取视频节点
            $('.videos').css("display","none");//点击关闭按钮关闭暂停视频
            v.pause();
            $('.videos').html();
      }

Anonymous 发表于 2020-5-12 22:17:48

JS不懂。

sunshow 发表于 2020-5-13 08:40:02

添加点击事件，获取DOM节点后，添加innerHtml display:none
播放器那块面积阻止冒泡
或者写个隐藏class ，点击事件的时候加上去就行了
已经忘记jquery的操作了，反正大概就那样吧

零辰三点 发表于 2020-5-13 08:59:19

百度不是挺多的嘛

simida 发表于 2020-5-13 10:30:42

百度一下
页: [1]
查看完整版本: js大佬，这个视频弹窗怎么改点击×就关闭