js实现弹窗效果
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js实现弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现弹窗效果的具体代码，供大家参考，具体内容如下
思路：
1.创建一个按钮，点击弹出弹窗
2.建立一个弹窗页面 固定定位 默认隐藏
3.将弹窗内容放在弹窗页面的中间
4.js将事件绑定按钮，点击后让弹窗页面显示
5.js事件绑定span标签，点击后让弹窗页面消失
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗</title> <link href="../css/弹窗.css" type="text/css" rel="stylesheet"> </head> <body> <!--打开弹窗按钮--> <button id="btn">打开弹窗</button> <!--弹窗--> <div id="myModal"> <!--弹窗头部--> <div class="modal"> <div class="modal-header"> <p>危险警告</p> <span class="close">×</span> </div> <!--弹窗文本--> <div class="modal-content"> <p>您将进入一个不安全的页面</p> </div> <!--弹窗底部--> <div class="modal-footer"> </div> </div> <script src="../js/弹窗.js"> </script> </body> </html>
CSS:
#myModal{
display: none;
position: fixed;
z-index:1;
left:0;
top:0;
width: 100%;
height:100%;
overflow: auto;
background:rgba(0,0,0,0.5);
}
#myModal .modal{
width: 500px;
height:300px;
position: relative;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -250px;
animation:animate 1s;
}
.modal .modal-header{
height:50px;
background:white;
color: #000;
line-height:50px;
border-bottom: 1px solid #000000;
}
.modal .modal-header p{
display: inline-block;
margin:0;
position: absolute;
left: 20px;
}
.modal .modal-header .close{
position: absolute;
right:20px;
font-size: 20px;
cursor:pointer;
}
.modal .modal-content{
background: white;
height:200px;
text-align: center;
line-height: 200px;
}
.modal .modal-content p{
margin:0;
}
.modal .modal-footer{
position: relative;
height:50px;
background: white;
}
/*添加动画*/
@keyframes animate{
from{top:0;opacity:0}
to{top:50%;opacity:1}
}
js：
window.onload=function () {
//获取弹窗按钮
var btn=document.getElementById("btn");
var close=document.getElementsByClassName("close")[0];
var myModal=document.getElementById("myModal");
//按钮绑定事件
btn.onclick=function () {
//获取弹窗
myModal.style.display="block";
}
close.onclick=function () {
myModal.style.display="none";
}
//用户点击其他地方关闭弹窗
window.onclick=function (event) {
if(event.target ==myModal){
myModal.style.display="none";
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：js实现盒子移动动画效果
下一篇：js实现表格数据搜索