关于微信小程序中弹框和模态框的实现（微信小程序模态框组件）

关于微信小程序中弹框和模态框的实现（微信小程序模态框组件）

这篇文章主要介绍了微信小程序 弹框和模态框实现代码的相关资料,需要的朋友可以参考下

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

实现效果图：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

实现代码：

-

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

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