最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序 弹框和模态框实现代码
时间:2017-06-16 编辑:简简单单 来源:一聚教程网
微信小程序 弹框和模态框实现代码
实现效果图:
实现代码:
代码如下 | 复制代码 |
/*模态框*/ .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); } |
-
上一个: 手机网站建设和开发的注意事项
-
下一个: 悦动圈app如何开启锁屏计步功能
相关文章
- 微信小程序运维中心怎么用 07-09
- 卸了APP来玩小程序 五款实用微信小程序推荐 07-07
- 微信小程序怎么做不用花钱 06-25
- 微信小程序怎么打开小程序 06-23
- 微信小程序星标取消方法介绍 06-15
- 微信小程序新增星标 方便置顶 06-15