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

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

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

实现效果图：

实现代码：

/*http://模态框*/

.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);

}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。