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

昵称

{{user.nickName}}

未填写

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;

}

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的微信小程序 html modal,微信小程序参考微信设计规范做的modal模态框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。