小程序端模态框实例

一：html

<view>
  <button bindtap='show'>点击弹出框</button>
  <view class='bg' hidden="{{isHidden}}">
    <view class='modalContent'>
      <view class='title'>标题</view>
      <view class='cansole'>✘</view>
      <view class='contents'>弹出框的内容</view>
    </view>
  </view>
</view>

二：css

.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 1;
}

.modalContent {
  border: 1px solid #ccc;
  height: 70%;
  width: 80%;
  position: absolute; /*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
  margin: 0 auto;
  top: 10%; /*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; /*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
  background: white;
}
.title
{
  height: 85rpx;
  line-height: 85rpx;
  background: #F5F5F5;
  color:#666;
  padding-left: 20rpx;
  font-size: 34rpx;
}
.cansole
{
  float: right;
  margin-right: 20rpx;
  margin-top: 20rpx;
}
.contents
{
  display: inline-block;
  margin-top: 70rpx;
  padding-left: 20rpx;
}

三：js

/**
   * 页面的初始数据
   */
  data: {
    isHidden: true //隐藏模态框
  },
   /**
   * 点击显示模态框触发
   */
  show: function() {
    this.setData({
      isHidden: false//显示模态框
    })
  },

四：页面效果

image.png