投稿
  1. 极客之音首页
  2. 技术随笔

微信小程序静态模框

小半 • • 技术随笔 • 阅读 183

导读：本篇文章讲解 微信小程序静态模框，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

效果图

在这里插入图片描述
实现代码

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
    <text>欢迎来到模态对话框~</text>
    <button bindtap="go">确认</button>
    <button bindtap="no">取消</button>
</view>

<button bindtap="submit">{{btnName}}</button>

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}

.modalDlg{
    width: 580rpx;
    height: 620rpx;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    margin: -370rpx 85rpx;
    background-color: #fff;
    border-radius: 36rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}



data: {
        showModal: false,
        btnName: "点我弹窗",
    },

   go: function () {
        this.setData({
            showModal: false,
            btnName: "点击了确认"
        })
    },

    no: function () {
        this.setData({
            showModal: false,
            btnName: "点击了取消"
        })
    },

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107094.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！