本篇内容主要讲解“小程序怎么自定义弹框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“小程序怎么自定义弹框”吧!
页面简单布局
<button bindtap='ElasticFrameClick'>弹框</button><view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view><view wx:if="{{showModal}}"> <view class="modal-content"> <view class='modal_title'>添加备注</view> <view class='modal_textarea'> <textarea placeholder='备注' maxlength='-1'></textarea> </view> <view class='btn'bindtap='hideModal'>保存</view> </view></view>样式设置
.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff;} .modal-content { position: fixed; top: 120rpx; left: 75rpx; z-index: 9500; width: 600rpx; height: 720rpx; overflow: hidden; background: #fff; border-radius: 20rpx;} .modal_title { height: 96rpx; width: 100%; line-height: 96rpx; border-top-right-radius: 20rpx; border-top-left-radius: 20rpx; background-color: #5a94ff; color: #fff; text-align: center;} .modal_textarea { height: 395rpx; width: calc(100% - 40rpx); margin: 20rpx;} .modal_textarea textarea { height: 100%; width: 100%;} .btn{ height: 70rpx; width: 390rpx; background-color: #5a94ff; color: #fff; text-align: center; line-height: 70rpx; border-radius: 50rpx; margin: 0 auto; margin-top: 40rpx;}js控制
Page({ data: { showModal: false, }, onLoad: function(options) { }, ElasticFrameClick: function() { this.setData({ showModal: true }) }, toShowModal(e) { this.setData({ showModal: true }) }, // 隐藏弹框 hideModal() { this.setData({ showModal: false }); }, onReady: function() { }, onShow: function() { }, onHide: function() { }, onUnload: function() { }, onPullDownRefresh: function() { }, onReachBottom: function() { }, onShareAppMessage: function() { }})页面呈现
到此，相信大家对“小程序怎么自定义弹框”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
