微信小程序参考微信设计规范做的modal模态框

<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" hover="{{true}}" bindtap="modal" data-modal="name">
        <view class="weui-cell__bd">昵称</view>
        <view class="weui-cell__ft weui-cell__ft_in-access">
                {{user.nickName}}
                <text wx:if="{{user.nickName==null}}">未填写</text>
        </view>
</view>

modal: function (e) {
        var self = this;
        this.setData({ modal: (e && e.currentTarget.dataset.modal) || "", input: self.data.user });
        // 这里对modal的赋值是关键
}

.modals {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
.modal {
  position: fixed;
  top: 25px;
  right: 15px;
  bottom: 25px;
  left: 15px;
  background-color: #ffffff;
  z-index: 1000;
  border-radius: 6px;
}
.modal__close {
  text-align: right;
  position: relative;
  top: 10px;
  right: 10px;
}
.modal__hd {
  padding: 0 10px;
  text-align: center;
}
.modal__hd,.modal__ft {
  font-weight: 400;
  font-size: 17px;
}
.modal__ft {
  border-top: 1px solid #D9D9D9;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.modal__btn {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-left: 1rpx solid #D9D9D9;
}
.modal__btn:first-child {
  border: none;
}