微信小程序實現彈窗效果

實現思路

模態對話框之所以被叫做“模態”，就是因爲在它彈出的時候，用戶如果不關閉這個對話框，是無法對其他窗口進行操作的。
那麼這樣一來，我們的思路就很明確了：

1. 構建一個蒙層（mask），使得背景變暗，並且阻止用戶對對話框外界面的這裏寫代碼片點擊事件；
2. 構建一個對話框，在需要時彈出即可（彈出同時觸發蒙層）。

 

 

.wxml：

<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：

.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：

Page({

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

 

參考：https://www.jb51.net/article/143440.htm