微信小程序点击按钮实现弹出模态框

效果图

wxml

预览




  

wcss

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

.modal-dialog {
  overflow: hidden;
  position: fixed;
  top: 30%;
  background: #f9f9f9;
  margin: -110rpx 105rpx;
  border-radius: 50%;
}
.view-image{
  width: 600rpx;
  height: 600rpx;
}

 

js

  /**
   * 按钮点击事件
   */
  changeYL: function () {
    this.setData({
      showModal: true
    })
  },
  /**
   * 隐藏模态对话框
   */
  hideModal: function () {
    this.setData({
      showModal: false
    });
  },