WeChat mini-program bullet box and modal box implementation code, mini-program mode

Code and mini-program mode

Code for the bullet box and modal box of the Applet

Implementation:

Implementation Code:

 <view class="wxapp-modal" style="{{modal_style}}">      <view class="content">      </view>     <view class="mask" bindtap="closeModal"></view>    </view>

/* Modal box */. 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.5, 0 );}

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!