Html + JQuery 点击图片弹出视频加蒙版，全局居中并且可关闭

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   });  };
})

Html + JQuery 点击图片弹出视频加蒙版，全局居中并且可关闭相关推荐

jQuery实现点击图片弹出视频并自动播放
有时候我们需要放一张视频的封面,当我们点击封面的时候就播放弹出视频并自动播放,而且我们还可以把视频的封面做成视频加载前的封面,代码较少 <!DOCTYPE html> <html l ...
jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验: http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目 ...
html基础总结4-实现点击图片弹出放大图片--不用插件
实现点击图片弹出放大图片--不用插件 <td width="350"> <img height="100" width="100&q ...
HTML中弹窗中加入图片,javascript里怎么实现点击图片弹出对话框？
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...
html点击图片产生事件,javascript里怎么实现点击图片弹出对话框？
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...
html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
点击图片弹出固定或自适应窗口
<a href="fullsize.jpg" target="_blank"><img src="small.jpg&q ...
html点击图片弹出模态框,JS实现图片点击后出现模态框效果
JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...
android 点击图片弹出对话框,android studio怎样弹出对话框--实际案例？
弹出对话框使用AlertDialogBuilder类构建,再用AlertDialog类具体化.我们假设在屏幕上有一退出程序的按钮,当用户点击该按钮时,弹出对话框询问是否退出程序,用户点击确定时退出程序 ...
html语言点击打开小窗口播放视频,点击图片弹出窗口播放视频html代码
楼主尼嚎~~HTML表单,通常都是被form标签所包括的.form标签内的内容还是可以用HTML常规代码书写.不过我认为楼主应该是想表达,HTML表格而不是表单吧?代码如下: htmlheadtitl ...

Html + JQuery 点击图片弹出视频加蒙版，全局居中并且可关闭

html代码

JQuery代码

Html + JQuery 点击图片弹出视频加蒙版，全局居中并且可关闭相关推荐

最新文章

热门文章