小编给大家分享一下微信小程序如何实现弹框和模态框，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联是工信部颁发资质IDC服务器商，为用户提供优质的成都服务器托管服务
微信小程序 弹框和模态框实现代码
实现效果图：
实现代码：
/*模态框*/
.wxapp-modal{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index:999;
}
.wxapp-modal .content{
width: 100%;
bottom: 10px;
text-align: center;
position: absolute;
}
.wxapp-modal .content .header{
margin: auto;
width: 93%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #FFFFFF;
position: relative;
z-index:9999;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: 1px #eee solid;
}
.wxapp-modal .content .body{
margin: auto;
width: 93%;
background-color: #FFFFFF;
position: relative;
z-index:9999;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
}
.wxapp-modal .content .footer{
margin: auto;
width: 93%;
height: 60px;
line-height: 60px;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
border-radius: 8px;
margin-top: 10px;
text-align: center;
}
.wxapp-modal .content .footer button{
display: inline-block;
width: 49%;
height: 60px;
line-height: 60px;
background-color: #FFFFFF;
margin-left: 0px;
}
.wxapp-modal .content .footer button:active{
background-color: #eee;
}
.wxapp-modal .content .footer button::after{
content:none;
}
.wxapp-modal .content .footer .cancel{
color: #fa5b43;
border-right: 1px #eee solid;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.wxapp-modal .content .footer .confirm{
color: #1ed3fa;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.wxapp-modal .mask{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-color:rgba(0,0,0,0.5);
}以上是“微信小程序如何实现弹框和模态框”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前名称：微信小程序如何实现弹框和模态框
分享网址：
http://bzwzjz.com/article/jscpeh.html
