微信小程序实现弹窗效果

实现思路

模态对话框之所以被叫做“模态”，就是因为在它弹出的时候，用户如果不关闭这个对话框，是无法对其他窗口进行操作的。
那么这样一来，我们的思路就很明确了：

1. 构建一个蒙层（mask），使得背景变暗，并且阻止用户对对话框外界面的这里写代码片点击事件；
2. 构建一个对话框，在需要时弹出即可（弹出同时触发蒙层）。


.wxml

[XHTML] 纯文本查看 复制代码

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
 <view bindtap="closeMask" class="modal-close">x</view>
 <image src="/assets/images/newer.gif"/>
</view>

<button bindtap="submit">点我弹窗</button>

.wxss

[CSS] 纯文本查看 复制代码

.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.7;
 }
 
 .modalDlg{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
 }

 .modal-close {
   position: fixed;
   top: -30rpx;
   right: -15rpx;
   color: #ffffff;
 }

js

[JavaScript] 纯文本查看 复制代码

Page({

  data: {
    showModal: false
   },
   
   submit: function() {
    this.setData({
    showModal: true
    })
   },
   
   preventTouchMove: function() {
   
   },
   
   closeMask: function() { 
    this.setData({
    showModal: false
    })
   }
})