<!--提示框開始-->
<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>
