点击按钮,弹出遮罩层,跳转页面播放视频

<!--提示框开始-->
<div id="mask"></div><!--遮罩层-->
<!--提示内容-->
<div id="mask_inter">
<span>是否观看视频?</span>
<div id="yes">要看</div>
<div id="no">不看</div>
</div>
<!--提示框结束-->

<button class="video"></button>
<style>
#mask{
position: fixed;
background-color: #080808;
opacity: .6;
top:0;
bottom:0;
left: 0;
right:0;
z-index: 9999;
display: none;
}
#mask_inter{
position: fixed;
z-index: 10000;
width: 300px;
height: 150px;
text-align: center;
background-color: #FFF;
left: 50%;
margin-left: -150px;
top:50%;
margin-top: -75px;
border-radius: 5px;
display: none;
padding: 0 5px;
}
#mask_inter span{
display: block;
margin-top: 45px;
margin-bottom: 25px;
}
#mask_inter div{
width: 100px;
border-radius: 5px;
padding:5px 0;
background-color: #3BCCB3;
float: left;
margin-left: 30px;
color: #FFF;
font-size: 14px;
cursor: pointer;
}
#mask_inter #no{
background-color: #C9C9C9;
}
/*提示框结束*/
</style>

$('.video').click(function () {
$('#mask').show();
$('#mask_inter').show();
$('#no').click(function(){
$('#mask,#mask_inter').hide();
});
$('#yes').click(function(){
window.open('www.
视频.com'); //视频网址
});
 });
视频页面:<body> <video style="width: 95%;height: 90%;margin-left: 2.5%;margin-top: 10px;" controls="" autoplay="" name="media"><source src="/video.mp4" type="video/mp4"></video> </body> 
 

转载于:https://www.cnblogs.com/mo-cha/p/6021847.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值