这篇文章给大家分享的是有关微信小程序中弹框和模态框怎么实现的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于云城网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供云城营销型网站建设，云城网站制作、云城网页设计、云城网站官网定制、微信平台小程序开发服务，打造云城网络公司原创品牌,更为您提供云城网站排名全网营销落地服务。

微信小程序 弹框和模态框实现代码

实现效果图：

实现代码：

/*模态框*/
.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);
}

感谢各位的阅读！关于“微信小程序中弹框和模态框怎么实现”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

分享名称：微信小程序中弹框和模态框怎么实现
分享URL：http://www.cqwzjz.cn/article/goshgo.html