素材巴巴 > 程序开发 >

微信小程序自定义模态框(uniapp/vue稍微改造一下即可使用)

程序开发 2023-09-24 16:34:10

 天梦星科技编程资源网(tmxkj.top)icon-default.png?t=N6B9https://tmxkj.top/#/

css代码


 .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: 90%;position: fixed; /*相对定位或绝对定位均可*/ top: 50%; left: 50%; transform: translate(-50%, -50%);margin: 0 auto;padding:30rpx;overflow: hidden;z-index: 9999;background: white;border-radius: 10rpx;}.btn{border-radius: 50rpx;height: 70rpx;font-size: 33rpx;width: 430rpx;color: rgba(0,0,0,1);display: flex;justify-content: center;align-items: center;margin-bottom: 20rpx;margin-top: 10rpx;}

html代码


 
 
 

js代码

 dataL{showModal:false},hideModal() {this.setData({showModal: false,})},openModal() {this.setData({showModal: true,})},


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。