AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
小程序弹框与模态框,微信小程序弹框和模态框实现代码

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

实现效果图:

实现代码:             

 <view class="wxapp-modal" style="{{modal_style}}">      <view class="content">      </view>     <view class="mask" bindtap="closeModal"></view>    </view>
/*模态框*/.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);}

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


小程序弹框与模态框,微信小程序弹框和模态框实现代码  
上一篇:BootStrap注意事项小结(五)表单  下一篇:BootStrap表单宽度设置方法