html代码
//点击的图片
<div class="sp">
<img src="图片路径" alt="">
</div>
//弹出的视频和蒙版
<div class="sp_main">
<div class="video-div" style="width: 668px;height: 388px; display: none;z-index: 2000;">
<video class="video" src="视频路径" controls="controls" width="668" height="388" autoplay>
您的浏览器不支持 video 标签。
</video>
<button style="position: relative;margin-left: 640px;top: -385px;cursor: pointer;" class="videoBtn">X</button>
</div>
<div class="mb" style="width: 100%;height: 3140px;background-color: black;z-index: 1000;top: 0;left: 0;position: absolute;opacity: 0.5;display: none;"></div>
</div>
JQuery代码
$(function(){
$('.sp img').on('click',function(){
$('.mb').show()
showSp($('.video-div'))
});
$('.videoBtn').on('click',function(){
$('.mb').hide()
$('.video-div').hide()
})
function showSp(obj){
$(obj).show();
center(obj);
$(window).scroll(function(){
center(obj);
});
$(window).resize(function(){
center(obj);
});
}
function center(obj){
var windowWidth=$(window).width();
var windowHeight=$(window).height();
var popupHeight = $(obj).height();
var popupWidth = $(obj).width();
$(obj).css({
"position": "absolute",
"top": (windowHeight-popupHeight)/2+$(document).scrollTop(),
"left": (windowWidth-popupWidth)/2
});
};
})