微客导航 » 文章资讯 » js实现弹窗效果

js实现弹窗效果

2023-07-19 01:48:05 166

本文实例为大家分享了js实现弹窗效果的具体代码，供大家参考，具体内容如下

思路：

1.创建一个按钮，点击弹出弹窗
2.建立一个弹窗页面固定定位默认隐藏
3.将弹窗内容放在弹窗页面的中间
4.js将事件绑定按钮，点击后让弹窗页面显示
5.js事件绑定span标签，点击后让弹窗页面消失

代码如下





弹窗




打开弹窗





危险警告
×

您将进入一个不安全的页面

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:animate1s;
}
.modal.modal-header{
height:50px;
background:white;
color:#000;
line-height:50px;
border-bottom:1pxsolid#000000;
}
.modal.modal-headerp{
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-contentp{
margin:0;
}
.modal.modal-footer{
position:relative;
height:50px;
background:white;
}
/*添加动画*/
@keyframesanimate{
from{top:0;opacity:0}
to{top:50%;opacity:1}
}

js：

window.onload=function(){
//获取弹窗按钮
varbtn=document.getElementById("btn");
varclose=document.getElementsByClassName("close")[0];
varmyModal=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";
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现弹窗效果

热门推荐

随机推荐