最近做网页设计项目,要求点击图片后弹出窗口,在新弹出窗口中播放视频。
从网上找了很多代码,要么非常复杂,要么兼容性有问题,反复对比多种实现方法,最后确定代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>JS+CSS实现点击弹出窗口,带关闭按钮|www.125jz.com</title> <style> body{ padding: 0px; background: url() 0 0 no-repeat; background-size: cover; } .demo{ width: 100%; height: 100%; position: relative; } .demo-bg{ position: absolute; left:0; top:0; z-index: 0; width: 100%; height: 100%; /*filter:Alpha(opacity=50);*/ background-color: rgba(0,0,0,0.4); /*实现透明背景*/ display: none; } #button{ width: 70px; height: 30px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: yellow; margin: 20px 0 0 40px; position: relative; border: 0; box-shadow: 2px 2px 10px red; -webkit-box-shadow: 2px 2px 10px red; -moz-box-shadow: 2px 2px 10px red; } .demo-txt{ position: relative; z-index: 1; color: #000; background: white; width: 711px; height: 450px; margin:auto; padding: auto; left: 0; right: 0; bottom: 0; top: 0; display: none; padding: 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #btn{ float: right; } </style> </head> <body> <div class='demo'> <img src="shipin.jpg" width="245" height="134" onclick="openDialog()"> <div class='demo-bg'></div> <div class='demo-txt'> <button id="btn" onclick="closeDialog()">关闭弹窗</button> <video width="711px" height="400px" controls autoplay> <source src="newminhe.mp4" type="video/mp4"></source> 请升级浏览器到最新版本! </video> </div> </div> <script> var demobg = document.querySelector(".demo-bg"); var demotxt = document.querySelector(".demo-txt"); function openDialog() { demotxt.style.display = "block"; demobg.style.display = "block"; } function closeDialog() { demotxt.style.display = "none"; demobg.style.display = "none"; } </script> </body> </html>
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1892.html