小程序模态框弹出全屏

效果图：

*封装modal

首先在你存放自定义组件的文件夹里新建个 modal 文件夹，一般都将所有组件都放在 components 下面。

然后右键新建 component，因为要作为组件引入到页面中

代码

modal.wxml

<view hidden='{{modalHidden}}'>  
  <view class='mask_layer' />  
  <view class='modal_box'>  
    <view class="title">
      <text class="closecate"  bindtap='modal_click_Hidden' >×</text>
      <text>选择分类</text>
    </view>  
    <view class='content'>  
     <checkbox-group bindchange="checkboxChange">
        <label class="linebox" wx:for="{{items}}">
          <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
      </checkbox-group>
    </view>  
    <view class='btn'> 
      <view bindtap='confirm' class='Sure'>确定</view>  
    </view>  
  </view>  
</view

modal.wxss

.mask_layer {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
}  
.modal_box {  
  width: 100%;
  overflow: hidden;
  position: fixed;
  /* top: 50%; */
  left: 0;
  z-index: 1001;
  background: #fafafa;
  /* margin: -150px 12% 0 12%; */
  /* border-radius: 3px; */
  height: 100%;
  
}  
  
.title {  
  /* text-align: center;   */
  background-color: gazure;  
  padding: 12px;
  height: 110rpx;
  line-height: 65rpx;

}  

.closecate{
  font-size: 60rpx;
  display: block;
  float: left;
  margin-right: 30rpx;

}


.content {  
  overflow-y: scroll; /*超出父盒子高度可滚动*/  
}  
.linebox{
  width: 94%;
display: block;
height: 90rpx;
line-height: 90rpx;
margin: 0 auto;
border-bottom: 1px solid #e2e5ea;
}
.linebox checkbox{
  margin-right: 40rpx;
}
.btn {  
  width: 100%;  
  margin-top: 65rpx;  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  justify-content: space-between;  
  box-sizing: border-box;  
  background-color: white;  
}  
  
.cancel {  
  width: 100%;  
  padding: 10px;  
  text-align: center;  
  color: red;  
}  
  
.Sure {  
  width: 100%;  
  padding: 10px;  
  background-color: gainsboro;  
  text-align: center;  
}  
  
.modalMsg {  
  text-align: center;  
  margin-top: 45rpx;  
  display: block;  
}

modal.js

Component({
  properties: {
    modalHidden: {
      type: Boolean,
      value: true
    }, //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden  
    modalMsg: {
      type: String,
      value: ' ',
    }
  },
  data: {
    // 这里是一些组件内部数据  
    text: "text",
    items: [
        { name: 'USA', value: '美国' },
        { name: 'CHN', value: '中国', checked: 'true' },
        { name: 'BRA', value: '巴西' },
        { name: 'JPN', value: '日本' },
        { name: 'ENG', value: '英国' },
        { name: 'TUR', value: '法国' },
      ]
    },
    checkboxChange: function (e) {
      console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    },
  methods: {
    // 这里放置自定义方法  
    modal_click_Hidden: function () {
      this.setData({
        modalHidden: true,
      })
    },
    // 确定  
    confirm: function () {
      console.log(this.data.text)
    }
  }
})

modal.json

{
  "component": true,
  "usingComponents": {}
}

完成

接下来就可以引用了

首先在你用的json文件中引用

  "usingComponents": {
    "modal":"/components/modal/modal"
  },

wxml文件里

<modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>

去触发他

    <view class="bj">
      <view class="cu-form-group" bindtap="categary">
        <view class="title">分类</view>
        <input placeholder=""></input>
        <text class="cuIcon-{{icon}} lg" style="font-size: 54rpx;" ></text>
      </view>
    </view>

在设置一下js

 data: {
    is_modal_Hidden:true,  
  },
    // 分类
  categary:function(){
    this.setData({
      is_modal_Hidden:false,
    })
  },
  cancel: function(){
    this.setData({
         hidden: true
    });
  },
  confirm: function(){
      this.setData({
          nocancel: !this.data.nocancel
      });    
      console.log("clicked confirm");
  },

完工 在调整下样式就可以了