本文实例为大家分享了js实现弹框效果的具体代码,供大家参考,具体内容如下
利用display来控制弹窗的现实和隐藏
<!-- 弹出层 --> <div id="popLayer"></div> <!--黑色蒙版 --> <div id="popBox"> <div class="close"> X </div> <div> <!-- 内容 --> </div> </div>
js:
//点击关闭按钮 var close = document.querySelector(".close") close.onclick = function () { console.log("点击") var popBox = document.getElementById("popBox"); var popLayer = document.getElementById("popLayer"); popBox.style.display = "none"; popLayer.style.display = "none"; } //需要显示时调用 var popLayer = document.getElementById("popLayer"); popBox.style.display = "block"; popLayer.style.display = "block";
CSS:
/* 弹出层 */ #popLayer { display: none; background-color: #000; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; opacity: 0.6; } /*弹出层*/ #popBox { display: none; background-color: #FFFFFF; z-index: 11; width: 220px; height: 300px; position: fixed; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } /*关闭按钮*/ #popBox .close { width: 20px; height: 20px; border-radius: 50%; position: absolute; border: 1px solid #fff; color: #fff; text-align: center; line-height: 20px; right: 8px; top: 8px; z-index: 50; } #popBox .close a { text-decoration: none; color: #2D2C3B; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享。 关于匹配字符...
本文实例为大家分享了JavaScript实现音乐导航效果的具体代码,供大家参考,具体...
Zookeeper分布式锁 客户端A要获取分布式锁的时候首先到locker下创建一个临时顺序...
家里有吃灰老爷机的朋友注意了,谷歌提醒,Chrome浏览器即将放弃对部分平台的支...
本文实例讲述了PHP设计模式之中介者模式(Mediator Pattern)。分享给大家供大家参...
简介 Prometheus是Golang写的,编译后就是一个二进制文件,不依赖于第三方运行库...
想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://...
这个简单的教程展示了如何通过PPA在Ubuntu 20.04, Ubuntu 20.10, Linux Mint 20...
Protobuf是什么 Protobuf实际是一套类似Json或者XML的数据传输格式和规范,用于...
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种...