如何在微信小程序中显示模态弹窗？
今天小编就带大家来共同学习如何在微信小程序中显示模态弹窗?希望可以帮助到有需要的小伙伴哦，下面就是详细完整的操作步骤。
组件说明:
显示模态弹窗
wx.showModal(OBJECT)
组件用法：
wxml
复制代码
js
Page({
data: {
},
showModel1:function(){
wx.showModal({
title: \'提示\',
content: \'这是一个简单设置的弹窗\',
success: function(res) {
if (res.confirm) {
console.log(\'用户点击确定\')
}
}
})
},
showModel2:function(){
wx.showModal({
title: \'提示\',
content: \'这是一个设定过全部属性模态弹窗\',
showCancel: true,
confirmText:\'好的\',
confirmColor:\'#FF0000\',
cancelText: \'算了\',
cancelColor:\'#999999\',
success: function(res) {
if (res.confirm) {
console.log(\'用户点击确定\');
}else{
console.log(\'用户点击取消\');
}
},
fail:function(){
console.log(\'接口调用失败\');
},
complete:function(){
console.log(\'接口调用结束\')
}
})
},
})
复制代码
wxss
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page__hd{
padding: 50rpx 50rpx 100rpx 50rpx;
text-align: center;
}
.page__title{
display: inline-block;
padding: 20rpx 40rpx;
font-size: 32rpx;
color: #AAAAAA;
border-bottom: 1px solid #CCCCCC;
}
.page__desc{
display: none;
margin-top: 20rpx;
font-size: 26rpx;
color: #BBBBBB;
}
.btn-area{
padding: 0 30px;
}
.btn-area button{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
复制代码
以上就是如何在微信小程序中显示模态弹窗的全部内容了，大家都学会了吗?
- 怎么在AutoCAD中查看全部的内容？
- 别弃我2026-08-03 00:31:12
- 如何在AutoCAD中选框选图形？在AutoCAD中选框选图形的方法
- 栗子2026-08-03 00:31:10
- 如何在AutoCAD中画箭头符号？
- 对味2026-08-03 00:30:52
- 怎么在AutoCAD中绘制三维立体室内图？
- 别认怂2026-08-03 00:30:48
- 怎么给AutoCAD中的3d图形填充颜色？
- 花心症2026-08-03 00:30:42
- 如何解决AutoCAD启动很慢的问题？
- 凉人心2026-08-03 00:30:38
- QQMac版如何修改备注？QQMac版修改备注的方法
- 留井2026-08-03 00:30:35
- QQ手机版怎么取消个性签名与空间同步？
- 何必等2026-08-03 00:30:31
- 如何在AutoCAD中设置底图？AutoCAD设置底图的方法
- 阑珊2026-08-03 00:30:31
- QQ手机版如何设置井柏然字体？设置井柏然字体的方法
- 棼谷2026-08-03 00:30:28
