模态框的css

作者: 姜治宇 | 来源:发表于2023-08-06 10:52 被阅读0次

第十三节 MFC的一些概念
element-ui dialog组件嵌套bug
进阶任务10-事件应用
bootstrap模态框多层嵌套，背景滚动
事件的应用
进阶任务10
事件的应用
小程序自定义模态框model
CSS 中的层叠上下文
modal 模态框

模态框的css设计，需要注意的是：
1、模态框居中
只要把top、bottom、left和right都初始化即可。
2、关闭按钮
关闭按钮我们一般用x号代替。这个首先可以利用overflow、text-indent和boder属性，把原生的button清理掉无用的东西，然后把伪类元素定位到容器中央即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .mask{
            position: fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:rgba(0,0,0,0.3);
        }
        .content{
            position: fixed;
            top:3em;
            bottom:3em;
            left:20%;
            right:20%;
            padding:2em 3em;
            background:white;
            overflow:auto;
        }    
        .close{
            position: absolute;
            top:0.3em;
            right:0.3em;
            padding:0.3em;
            cursor:pointer;
            font-size:2em;
            height:1em;
            width:1em;
            text-indent: 10em;
            overflow:hidden;
            border:0;
        }
        .close::after{
            position:absolute;
            top:0.2em;
            left:0.2em;
            text-indent: 0;
            line-height: 0.6;
            content:"\00D7";
        }
    </style>
</head>
<body>
    <div class="dialog">
        <div class="mask"></div>
        <div class="content">
            <button class="close">关闭</button>
        </div>
    </div>
</body>
</html>