微信小程序自定义模态框（uniapp/vue稍微改造一下即可使用）

编程社区管理员

已于 2023-07-19 17:13:03 修改

阅读量489

点赞数

文章标签：微信小程序 uni-app vue.js

于 2023-07-19 17:06:36 首次发布

本文链接：https://blog.csdn.net/qq_53722480/article/details/131813344

版权

天梦星科技编程资源网（tmxkj.top）https://tmxkj.top/#/

css代码


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

    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    }
    .modal-dialog {
   box-sizing:border-box;
    width: 90%;
    position: fixed; /*相对定位或绝对定位均可*/ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    margin: 0 auto;
    padding:30rpx;
    overflow: hidden;
    z-index: 9999;
    background: white;
    border-radius: 10rpx;
    }
  
     .btn{
        border-radius: 50rpx;
        height: 70rpx;
        font-size: 33rpx;
        width: 430rpx;
        color: rgba(0,0,0,1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
        margin-top: 10rpx;
     }

html代码


<view>

    <view class="modal-mask"  catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
   <view>
       <view style="font-size: 50rpx;text-align: right; margin: -30rpx 0rpx 10rpx 40rpx;" bindtap="hideModal">×</view>
       <view style="display: flex;flex-direction: column; justify-content: center; align-items: center;">
    
           
       </view>
   </view>
   <view>
      <button bindtap="ture_to" style="background-color: #eb4166; color: white;" class="btn">确定</button>
   </view>
</view>

</view>

js代码

 dataL{
   showModal:false
  },


 hideModal() {
        this.setData({
            showModal: false,
        })
    },
    openModal() {
        this.setData({
            showModal: true,
        })
    },