微信小程序实现简单弹框效果

    
    
      
        
          
发送短信
        
      
      
          
              
                {{item.value}}
              
          
      
      
        
      
      
        
          取消
        
        
          发送
        
      
    

 .btn{
  color: #fff;
  font-size: 31rpx;
  background-color: #f95137;
  margin: 11rpx 20rpx 0rpx;
  border-radius: 45rpx;
  width: 215rpx;
  height: 81rpx;
  line-height: 81rpx;
  /* padding-left: ;   */
  }
.btnFlex{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
}
.dialog-head{
  font-size: 33rpx;
  color: #172238;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 20rpx;  
  border-bottom: 1rpx solid #e1e5e9;
}
 
/* 文本域 */
.textarea {
  width: 92%;
  height: 246rpx;
  margin: 20rpx 30rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 6rpx;
  border: solid 1rpx #e7eaf0;
  background-color: #f4f6f9;
}
.radio {
  width: 33%
}
.section_gap {
  margin: 20rpx 30rpx;
}

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    showModal: false,
    items: [
      { name: 'USA', value: '刘禅' },
      { name: 'CHN', value: '刘备', checked: 'true' },
      { name: 'BRA', value: '诸葛亮' },
      { name: 'JPN', value: '关羽' },
      { name: 'ENG', value: '赵云' },
      { name: 'FRA', value: '张子龙' },
    ]
  },
//给自定义button或者自定义view添加一个点击事件跳转，这里的html就不给出来了
  signinTap: function(e) {
    this.setData({
      showModal: true,
    })
  //具体调用接口省略***
  },
 // 发送
  go() {
    this.setData({
      showModal: false
    })
  //具体调用接口省略***
  },
  //取消
  close() {
    this.setData({
      showModal: false
    })
    // this.showModal = false;
   },