介绍,& lt; view 类=皐xapp-modal",风格=皗{modal_style}}“比;
,,,,,& lt; view 类=癱ontent"比;
,,,,,& lt;/view>
,,,,& lt; view 类=癿ask", bindtap=癱loseModal"祝辞& lt;/view>
,,,& lt;/view> /*模态框*/.wxapp-modal {
,宽度:100%;
,高度:100%;
位置:大敌;固定;
上图:大敌;0 px;
,左:0 px;
,z - index: 999;
}
.wxapp-modal .content {
,宽度:100%;
,底部:10 px;
,text-align:中心;
,位置:绝对;
}
.wxapp-modal .content .header {
保证金:大敌;汽车;
,宽度:93%;
,高度:60 px;
,行高:60 px;
,text-align:中心;
,background - color: # FFFFFF;
,位置:相对;
,z - index: 9999;
,border-top-left-radius: 8 px;
,border-top-right-radius: 8 px;
,边界底部:1 px # eee 固体;
}
.wxapp-modal .content .body {
保证金:大敌;汽车;
,宽度:93%;
,background - color: # FFFFFF;
,位置:相对;
,z - index: 9999;
,border-bottom-left-radius: 8 px;
,border-bottom-right-radius: 8 px;
,溢出:隐藏;
}
.wxapp-modal .content .footer {
保证金:大敌;汽车;
,宽度:93%;
,高度:60 px;
,行高:60 px;
,background - color: # FFFFFF;
,位置:相对;
,z - index: 9999;
,这个特性:8 px;
,margin-top: 10 px;
,text-align:中心;
}
.wxapp-modal .content .footer 按钮{
,显示:inline-block;
,宽度:49%;
,高度:60 px;
,行高:60 px;
,background - color: # FFFFFF;
,margin-left: 0 px;
}
.wxapp-modal .content .footer 按钮:活跃的{
,背景颜色:# eee;
}
.wxapp-modal .content .footer 按钮::{
,内容:没有;
}
.wxapp-modal .content .footer .cancel {
,颜色:# fa5b43;
,边境:1 px # eee 固体;
,border-top-right-radius: 0 px;
,border-bottom-right-radius: 0 px;
,border-top-left-radius: 8 px;
,border-bottom-left-radius: 8 px;
}
.wxapp-modal .content .footer 确定{
,颜色:# 1 ed3fa;
,border-top-left-radius: 0 px;
,border-bottom-left-radius: 0 px;
,border-top-right-radius: 8 px;
,border-bottom-right-radius: 8 px;
}
.wxapp-modal .mask {
,宽度:100%;
,高度:100%;
位置:大敌;固定;
上图:大敌;0 px;
,背景颜色:rgba (0, 0, 0, 0.5);
}
这篇文章给大家分享的是有关微信小程序中弹框和模态框怎么实现的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>微信小程序弹框和模态框实现代码
<强>实现效果图:
实现代码:
感谢各位的阅读!关于“微信小程序中弹框和模态框怎么实现”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
