移动端model对话框

来源：互联网发布：深圳网络安全工程师编辑：程序博客网时间：2024/06/08 10:20

会根据窗口大小调整位置，宽度固定(可以自己调整)，高度是auto

效果如图：

代码如下：

<div class="layerOfTeacher ">  <div class="layer-box">    <div class="layer-title">我是弹层</div>    <div class="layer-btn"><button class="cancel-btn" id="cancel">取消</button><button class="confirm-btn" id="confirm">确定</button>    </div>  </div></div>

scss代码如下：

.layerOfTeacher{  position: fixed;  overflow: auto;  top: 0;  right: 0;  bottom: 0;  left: 0;  height: 100%;  z-index: 999;  background-color: rgba(0,0,0,0.5);  display: flex;  align-items: center;  justify-content: center;  &.hide{    display: none;  }  .layer-box {    position: relative;    width: 5.6rem;    height: auto;    border-radius: 0.4rem;    background-color: #fff;    .layer-title {      font-size: 0.45rem;      text-align: center;      margin-top: 0.2rem;      margin-bottom: 0.2rem;    }    .layer-small {      text-align: center;      margin-top: 0.2rem;      margin-bottom: 0.2rem;      color: #afacac;    }    .number {      border: 0.01rem solid #a5a3a3;      width: 2rem;      height: 0.5rem;      position: absolute;      left: 0;      right: 0;      margin: auto;      padding-left:0.2rem;    }    .layer-btn {      margin-top: 1rem;      display: flex;      flex-direction: row;      border-top: 1px solid #a5a3a3;      button {        flex: 1;        font-size: 0.4rem;        padding: 0.2rem;        background-color: #fff;        border: none;        outline: none;      }      .confirm-btn {        border-bottom-right-radius: 0.4rem;        border-left: 1px solid #a5a3a3;        color: #108ee9;      }      .cancel-btn{        border-bottom-left-radius: 0.4rem;      }    }  }}

阅读全文

0 0