微客导航 » 文章资讯 » JavaScript实现弹出窗口效果

JavaScript实现弹出窗口效果

2023-07-08 13:04:08 159

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

思路

1、总体使用两个div，一个作为底层展示，一个做为弹出窗口；
2、两个窗口独立进行CSS设计，通过display属性进行设置现实与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局；
3、在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。

一、设置两个div


弹出窗口




//底层div

//弹出层div

二、对两个div进行独立CSS设置，弹出窗口display设为none


弹出窗口



body{
background-color:cyan;
}
#popDiv{
display:none;
background-color:crimson;
z-index:11;
width:600px;
height:600px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}



//底层div

弹窗

//弹出层div //关闭按钮超链接关闭

此处为弹出窗口

三、定义并设置弹出按钮和关闭窗口函数


functionpopDiv(){
//获取div元素
varpopBox=document.getElementById("popDiv");
varpopLayer=document.getElementById("popLayer");

//控制两个div的显示与隐藏
popBox.style.display="block";
popLayer.style.display="block";
}

functionclosePop(){
//获取弹出窗口元素
letpopDiv=document.getElementById("popDiv");

popDiv.style.display="none";
}

四、将函数设置到onclick事件中

弹窗
关闭

五、设置关闭链接CSS和pop界面的其余CSS


/*关闭链接样式*/
#popDiv.closea{
text-decoration:none;
color:#2D2C3B;
}
/*弹出界面的关闭链接*/
#popDiv.close{
text-align:right;
margin-right:5px;
background-color:#F8F8F8;
}
#popDivp{
text-align:center;
font-size:25px;
font-weight:bold;
}

六、整体代码


弹出窗口



functionpopDiv(){
//获取div元素
varpopBox=document.getElementById("popDiv");
varpopLayer=document.getElementById("popLayer");

//控制两个div的显示与隐藏
popBox.style.display="block";
popLayer.style.display="block";
}

functionclosePop(){
//获取弹出窗口元素
letpopDiv=document.getElementById("popDiv");

popDiv.style.display="none";
}


body{
background-color:cyan;
}
#popDiv{
display:none;
background-color:crimson;
z-index:11;
width:600px;
height:600px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
/*关闭按钮样式*/
#popDiv.closea{
text-decoration:none;
color:#2D2C3B;
}
/*弹出界面的关闭按钮*/
#popDiv.close{
text-align:right;
margin-right:5px;
background-color:#F8F8F8;
}
#popDivp{
text-align:center;
font-size:25px;
font-weight:bold;
}




弹窗




关闭

此处为弹出窗口

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

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

返回顶部
3162201930
czq8825@qq.com

JavaScript实现弹出窗口效果

热门推荐

随机推荐