美文网首页
如何写一个遮挡层和对话框

如何写一个遮挡层和对话框

作者: 我_巨可爱 | 来源:发表于2017-11-24 15:27 被阅读0次
  1. 遮挡层,全屏
  2. 对话框上下左右居中

html

<div class="wrapper">
    <div class="bg"></div>
    <div class="contaier"></div>
</div>

css

.wrapper, .bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}
.bg {
    background: #364252;
    opacity: 0.7;
}
.contaier {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 500px;
    background-color: red;
}

相关文章

  • 如何写一个遮挡层和对话框

    遮挡层,全屏 对话框上下左右居中 html css

  • IE FF Chrome 浏览器 css BUG

    IE7 浮层遮挡 浮层遮挡情况想必大家在测试网页布局师会有遇到过吧,如果浮层中的元素覆盖的区域含有设置了post...

  • vue el-dialog的标题以及内容对齐

    el-dialog 弹出层 对话框标题的左对齐

  • 高版本dialog被遮挡时显示异常

    高版本dialog被遮挡时,对话框内设置高度wrap_content 容易高度为0,可在Dialog的onWind...

  • 第十三节 MFC的一些概念

    一、模态对话框和非模态对话框Windows对话框分为两类:模态对话框和非模态对话框。模态对话框是这样的对话框,当它...

  • 模态框被遮罩层遮挡

    在模态框的div,设置data-backdrop="false",注:设置模态框取消自动启动遮罩层

  • Ufk

    当前任务 1.柱子做成遮挡关系 ✔ 2.细节处理 办公桌 ✔ 花 ✔ ✔ 动态雕塑 ✔ 灰尘 教室 ✔ 对话框太大...

  • 关于遮罩层事件穿透

    外层(被遮挡的层){pointer-events: none;} 内层(要发生事件的层){pointer-even...

  • 2017-9-26学习总结

    星期二 小雨 今天学习了对话框与控件。 上午老师首先讲了对话框分为模式对话框和非模式对话框,就是先创建一个MF...

  • Qt5 - 5. 对话框 QDialog

    Qt 中使用 QDialog 类实现对话框,通常是设计一个类继承 QDialog。Qt 的对话框分为模态对话框和非...

网友评论

      本文标题:如何写一个遮挡层和对话框

      本文链接:https://www.haomeiwen.com/subject/wbhfbxtx.html