点击遮罩关闭弹窗效果 

 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>

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

posted @ 2016-08-08 11:07  千枫漓音  阅读(591)  评论(0)    收藏  举报