原生dialog蒙层

原创已于 2023-08-22 14:28:59 修改 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端 #html

于 2023-08-21 15:27:30 首次发布

<div class="pop-up-mask" v-show="hide">
    <div class="content" style="width: 350px;height: 473px;">
      <div id="popUp">
        <div class="top">
          <div class="title">新增客诉</div>
          <span class="close" @click="close">x</span>
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div style="display: flex;justify-content: center;">
                    <button class="layui-btn layui-btn-primary" @click="close">取消</button>
                    <div class="example-handle query_btn">
                        <a class="examine-query" @click="formDemo">确定</a>
                    </div>
                </div>
            </div>
        </form>
      </div>
    </div>
  </div>



.pop-up-mask{
  width:100%;height:100%;
  background:rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: 1000;
}
.pop-up-mask .content {
  position:absolute!important;
  top:50%!important;left:50%;
  transform:translate(-50%,-50%);
  background: #fff;
}
.pop-up-mask .content .top {
  height: 35px;
  border-bottom:1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pop-up-mask .content .top .title {
  font-size: 16px;
  margin-left: 10px;
}
.pop-up-mask .content .top .close {
  margin-right: 14px;font-size: 21px;
  cursor: pointer;
}

        close:function(){
            vm.hide=false;
        }