2021-03-18

微信小程序模态框

WXML页面

---

view bindtap='showRule'>点击事件

    

      

      

      

       

  

    

---

js逻辑层

data:{

    },

     //打开规则提示

      showRule: function () {

        this.setData({

          isRuleTrue: true

        })

      },

      //关闭规则提示

      hideRule: function () {

        this.setData({

          isRuleTrue: false

        })

      },

---

css样式层

.isRuleShow{

  display: block;

}

.isRuleHide{

  display: none;

}

.ruleZhezhao{

  height: 100%;

  width: 100%;

  position: fixed;

  background-color:rgba(0, 0, 0, .5); 

  top: 0;

  left: 0;

  z-index: 999;

}

.ruleZhezhaoContent{

  padding: 40rpx 0;

  /* width: 50%; */

  width: 430rpx;

  height: 390rpx;

  background: #fff;

  /* background-color: transparent; */

  margin: 40% auto;

  border-radius: 20rpx;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

  position: relative;

}

.ruleHide{

  height: 60rpx!important;

  width: 60rpx!important;

  position: absolute;

 margin: 280rpx auto;

  z-index: 10000;

}

.select{

  /* width: 320rpx;

  height: 320rpx;

  margin-top: 5rpx;

  margin-bottom: 30rpx; */

  width: 390rpx;

  height: 390rpx;

  position: relative;

  top: 36%;

  left: 45.5%;

  transform: translate(-50%, -50%);

  display: block;

}

.text{

  display: block;

  text-align: center;

  font-size: 40rpx;

  font-weight:bolder;

  position: relative;

  top: 3%;

}

---

第二种

  

      点击按钮

      

        

          

        

        

        这是用来换行的

        

      

---

js逻辑层

data: {

    modalHidden: true

  },

  /**

   * 显示弹窗

   */

  buttonTap: function () {

    this.setData({

      modalHidden: false

    })

  },

  /**

   * 点击取消

   */

  modalCandel: function () {

    // do something

    this.setData({

      modalHidden: true

    })

  },

  /**

   *  点击确认

   */

  modalConfirm: function () {

    // do something

    this.setData({

      modalHidden: true

    })

  },

---

Css

page{

  background-color: #EEEEEE;

}

.content{

  border-radius: 1vw;

  background-color: white;

  width: 92vw;

  margin: 3.5vw auto;

  padding:2vw  3.5vw ;

  box-sizing: border-box;

  font-size: 4vw;

}

.contentBox{

  font-size: 3.3vw;

  padding-bottom:3vw ;

}

.contentText{

  display: flex;

  justify-content:space-between;

  padding:  2vw 0;

  box-sizing: border-box;

}

.contentFlex{

  width: 50%;

}

.contentFlexUp{

  color: #999;

  margin-bottom: 1vw;

}

.content-bot{

  margin-top: 3vw;

  display: flex;

  width: 100%;

  justify-content:space-between;

}

.content-bot view{

  height: 9vw;

  line-height: 9vw;

  color: white;

  width: 22vw;

  border-radius: 0.6vw;

  margin-left: 5vw;

  text-align: center;

  font-size: 3.5vw;

}

.text{

  width: 100vw;

  padding:5vw;

  text-align: center;

  box-sizing: border-box;

  font-size: 3vw;

}

.but{

  margin:6vw auto 3vw;

  color: white;

  background-color: rgb(55, 134, 236);

  text-align: center;

  line-height: 13vw;

  height: 13vw;

  width: 92vw;

  border-radius: 0.8vw;

  font-size: 5vw;

}

.but:hover{

  background-color:  rgba(55, 134, 236,0.7);

}

.phone{

  display: flex;

  justify-content: space-around;

  align-items: center;

  width: 92vw;

  font-size:3.4vw; 

  color:#666; 

  height: 3.4vw;

  margin-left: 4vw;

  margin-bottom: 4vw;

  text-align: center;

  }

  .phone view{

height: 1px;

width: 22%;

margin-top: 2.3vw;

background-color: #ddd;

  }

   /* button{

    height: 7vw;

    width: 28vw;

    border-radius: 0.6vw;

    margin-left: 3vw;

    font-size: 3.5vw;

    text-align: center;

    line-height: 7vw;

    display: flex;

    justify-items: flex-start;

    align-items: flex-end;

  } */

   button{

    height: 9vw;

    line-height: 9vw;

    color: black;

    width: 28vw;

    border-radius: 0.6vw;

    margin-left: 0vw;

    text-align: center;

    font-size: 3.5vw;

  }

  .image {

    width: 300rpx;

    height: 300rpx;

    position: relative;

    top: 200%;

    left: 145%;

    transform: translate(-50%, -50%);

    /* margin: auto; */

  }