自定义模态框

本文通过示例代码详细介绍了小程序自定义模态框，需要的朋友可以参考下

点击"模拟 Dialog"按钮，实现如图所示的样式

1.html部分代码如下：

<button class="weui-btn" type="default" bindtap="openDialog">模拟 Dialog</button>
<view class="weui-demo-dialog {{istrue ? 'weui-demo-dialog_show' : ''}}"  catchtouchmove="true">
  <view class="weui-mask" bindtap="closeDialog"></view>
  <view class="weui-dialog__wrp" bindtap="closeDialog">
      <view class="dialog_box" catchtap="stopEvent">
        <!-- 标题文字 -->
        <view class="model__title">注册成功</view>
        <!-- 提示icon -->
        <image class="model__img" src="../../../images/finish.png" mode="aspectFill" style="max-width:100%;"/>
        <!-- 按钮 -->
        <view class="model__ft" bindtap="closeDialog">确定</view>
      </view>
  </view>
</view>

滑动弹出的视图，发现根页面page也跟着滑动，此时需要在页面中添加 catchtouchmove="true"这个属性来阻止底部页面的滚动
2.css部分代码如图所示

.weui-demo-dialog{
  visibility:hidden;
  opacity:0;
  transition:opacity .3s;
}
.weui-demo-dialog_show{
  visibility:visible;
  opacity:1;
}
@media screen and (min-width: 352px){
  .dialog_box{
    width: 542rpx;
    margin: 0 auto;
  }
}
@media screen and (min-width: 750px){
  .dialog_box{
    width: 302px;
    margin: 0 auto;
  }
}
/* .dialog_box{
    width: 300px;
    margin: 0 auto;
} */
.dialog_box{
  background-color: #ffffff;
  text-align: center;
  border-radius: 8rpx;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction:column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  align-items: center;
}
.model__title{
  font-size: 18px;
  line-height: 36rpx;
  color: #000000;
  padding: 28px 0 30px;
}
.model__img{
  width: 50px;
  height: 50px;
  margin-bottom: 35px;
}
.model__ft{
  width: 100%;
  height:54px;
  font-size: 18px;
  line-height: 54px;
  color: #2EA7E0;
  border-top:1rpx solid #E5E5E5;
}

3.Js部分代码如下所示：

openDialog: function () {
    this.setData({
      // istrue: true
    })
 },
closeDialog: function () {
    this.setData({
      istrue: false
    })
},

来源：CSDN

作者：gyuei

链接：https://blog.csdn.net/gyueh/article/details/102543321