码迷,mamicode.com
首页 > 其他好文 > 详细

点击遮罩关闭弹窗效果

时间:2016-08-08 12:49:57      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
 1 function videoPlay(obj){
 2     $(obj).hover(function () {
 3         $(".detail",this).stop().fadeToggle();
 4         $(".detail",this).click(function(){
 5             var src = $(this).attr("data-url");
 6             $("#video").attr("src",src);
 7             $(‘#mask1‘).fadeIn(200);
 8         });
 9         //如果需要点击 mask 关闭弹窗的话,注意阻止事件冒泡
10         $(‘#mask1 .v-wrap‘).on(‘click‘,function(e){
11             e.stopPropagation();
12         });
13         $(‘#mask1‘).on(‘click‘,function(){
14             $(‘#mask1‘).fadeOut(200,function(){
15                 $(this).removeAttr(‘style‘);
16                 $(this).find("video").removeAttr(‘src‘);
17             });
18         });
19     });
20 }
js部分
<div id="mask1" style="display:none;">
    <div class="v-wrap">
                <video src="" width="730" height="450" controls="" loop="" preload="auto" poster="" id="video">
                    HTML5 Video is required for this example
                </video>                
    </div>
</div>

暂时还不会把遮罩和弹出内容分开那种做法。。。

点击遮罩关闭弹窗效果

标签:

原文地址:http://www.cnblogs.com/liyinSakura/p/5748495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!