移动端model对话框

会根据窗口大小调整位置，宽度固定(可以自己调整)，高度是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;
      }
    }
  }
}