模态框的css
2023-08-06 本文已影响0人
姜治宇
模态框的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>
