微信小程序自定义弹出框

maomaomao哇

已于 2022-12-13 10:55:10 修改

阅读量963

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序微信

于 2022-12-13 10:45:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65490785/article/details/128298323

版权

本文介绍如何创建一个可自定义的微信小程序弹出框，支持通过按钮或点击背景关闭，提供了简单的wxml、wxss和js代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV

弹框可以点击按钮关闭，也可以点击空白关闭

代码很简单

wxml

<view bindtap="submit">点击显示</view>
<view class="mask" bindtap="preventTouchMove" wx:if="{
  {showModal}}"></view>
 
<view class="mask1" wx:if="{
  {showModal}}">
  <view class="modalDlg">
    <view style="height: 500rpx;"></view>
    <button bindtap="showHide">点我可以关掉对话框</button>
</view>
</view>

wxss

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
}
.mask1{
  position: absolute;
  width: 100%;
  top: 20%;
}
 
.modalDlg{
    position: relative;
    z-index: 9999;
    height: 700rpx;
    background-color: white;
    border-radius: 36rpx;
}

最低0.47元/天解锁文章