正在阅读：如何在微信小程序中显示模态弹窗？显示方法介绍如何在微信小程序中显示模态弹窗？显示方法介绍

　　今天小编就带大家来共同学习如何在微信小程序中显示模态弹窗?希望可以帮助到有需要的小伙伴哦，下面就是详细完整的操作步骤。

      组件说明:

　　显示模态弹窗

　　wx.showModal(OBJECT)

　　组件用法：

　　wxml

　　<viewclass="page">

　　<viewclass="page__hd">

　　<textclass="page__title">modal</text>

　　<textclass="page__desc">模式对话框</text>

　　</view>

　　<viewclass="page__bd">

　　<viewclass="btn-area">

　　<buttontype="default"bindtap="showModel1">简单设定的modal</button>

　　<buttontype="default"bindtap="showModel2">全部自定义设定的modal2</button>

　　</view>

　　</view>

　　</view>

　　复制代码

　　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,HelveticaNeue,Helvetica,sans-serif;

　　overflow:hidden;

　　}

　　.page__hd{

　　padding:50rpx50rpx100rpx50rpx;

　　text-align:center;

　　}

　　.page__title{

　　display:inline-block;

　　padding:20rpx40rpx;

　　font-size:32rpx;

　　color:#AAAAAA;

　　border-bottom:1pxsolid#CCCCCC;

　　}

　　.page__desc{

　　display:none;

　　margin-top:20rpx;

　　font-size:26rpx;

　　color:#BBBBBB;

　　}

　　.btn-area{

　　padding:030px;

　　}

　　.btn-areabutton{

　　margin-top:20rpx;

　　margin-bottom:20rpx;

　　}

　　复制代码