在此要很感谢简书的一位作者,当初写这个弹框的时候被吐槽太丑了,尤其是页面滚动条的体验太差,先放上简书那位作者的地址 898310778 的 https://www.jianshu.com/p/a3eb60b75b92
我使用简书作者的代码后感觉美滋滋,但是过了几天被我们运营发现了bug
,说是所有的弹框字体太模糊了(为了方便,我把样式放在了base.css
里面),在网上找原因是说transform
导致的,因为在使弹框居中的时候,我采用的是这样的居中方式
随便写的一个demo
div{
width:300px;
height:300px;
background:cadetblue;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
后来我改良了一下弹框的居中方式,采用弹性布局方式(就是最后一段代码)*,解决了字体模糊的问题,下面上代码,下面的代码包含了在 header
和 footer
部分添加border
边框,右上角的close
关闭按钮放大
.el-dialog{
margin:0!important;
display:flex;
flex-direction:column;
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}
.el-dialog__body{
transform: translate3d(0,0,0);
overflow:auto;
}
.el-dialog__header {
padding: 20px 20px 20px 20px!important;
border-bottom: 1px solid #f4f4f4;
}
.el-dialog__footer {
text-align: center!important;
padding: 12px 20px 12px 20px!important;
border-top: 1px solid #f4f4f4;
}
.el-dialog__headerbtn {
position: absolute;
top: 20px;
right: 20px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 24px!important;
}
.el-dialog__wrapper {
display:flex;
justify-content: center;
align-items:center;
}
下面是效果图
既然谈到了居中方式,我就把以往搜索到的居中方式在这里集合一下吧哈哈,总共有四种方式,效果图如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.ffather{
background:cornsilk;
}
/* .ffather div{
float:left;
} */
/* flex方法 */
.father {
background: antiquewhite;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.son {
background: red;
}
/* css3 transform 方法 */
.father2 {
background: salmon;
width: 200px;
height: 200px;
position: relative;
}
.father2 .son-center {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
/* display:table-cell 方法 */
.father3{
background:hotpink;
width:200px;
height:200px;
display:table-cell;
text-align: center;
vertical-align: middle;
}
.father3 .son-center{
display:inline-block;
vertical-align: middle;
}
/* display:grid 方法 */
.father4{
background:cadetblue;
width:200px;
height:200px;
display:grid;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="ffather">
<div class="father">
<div class="son-center">xxxxxxxxxxxxxxxxx</div>
</div>
<div class="father2">
<div class="son-center">xxxxxxxxxxxxxxxxx</div>
</div>
<div class="father3">
<div class="son-center">xxxxxxxxxxxxxxxxx</div>
</div>
<div class="father4">
<div class="son-center">xxxxxxxxxxxxxxxxx</div>
</div>
</div>
</body>
</html>