WeChatウィジェットのユーザー定義の純モーダルボックス（ポップアップボックス）のコード例

公式APIが提供するモダリティボックスは簡単な文字しか表示できないが、実際のアプリケーションシーンでは、モダリティボックスに様々なコンポーネントやスタイルを表示することができるので、それをベースにして、みんながカスタマイズできるピュア版のモダリティボックスをシミュレートし、様々なニーズを満たすために必要である。
効果図:

WXML:

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
              ，              
</view>

WXSS:

/*     */
 
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
}
 
.modal-dialog {
 box-sizing:border-box;
 width: 85%;
 padding:30rpx;
 overflow: hidden;
 position: fixed;
 top: 20%;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 9999;
 background: white;
 border-radius: 5rpx;
}

JS:

data: {
 showModal: false, //false      true     
 },
 /**
 *        touchmove  
 */
 preventTouchMove: function () {
 },
 /**
 *        
 */
 hideModal() {
 var that = this;
 that.setData({
  showModal: false,
 })
 },

モーダルボックスを開けて、ラベルにイベントを結びつけるだけで、データの中のショーModalをtrueにセットすればいいです。
これは最も清浄なバージョンで、個人はよく使って、すぐに出して、みんなの開発効率を速めることができることを望みます。
ここでは、WeChatウィジェットのユーザー定義の純粋なモダリティボックス（ポップアップボックス）の例コードについての記事を紹介します。これに関連して、WeChatウィジェットのカスタムモダリティ枠の内容を紹介します。以前の記事を検索してください。または、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。