优化elelment ui 的 dialog 样式

在此要很感谢简书的一位作者，当初写这个弹框的时候被吐槽太丑了，尤其是页面滚动条的体验太差，先放上简书那位作者的地址 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>

优化elelment ui 的 dialog 样式相关推荐

element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...
JQuery UI库 - Dialog
在网站中我们经常会做一些好看的Popup Dialog,我们前面曾经讲过用JQuery的Importo插件来做自定义的AlertBox. 其实,我们可以利用JQuery官方提供的UI库来做. 而且, ...
Jquery ui的dialog使用文档概述
Jquery ui的dialog使用文档概述一个浮动的窗口,包含标题和内容两部分.可以移动,调整大小,以及关闭图标'×'.如果内容长度超过了对话框内容区域的显示,则会自动出现滚动条.除此之外,还有一 ...
android 7双排设置菜单,联想拯救者电竞手机优化横屏UI 设置菜单呈左右双排显示...
原标题:联想拯救者电竞手机优化横屏UI 设置菜单呈左右双排显示过去的直板手机都由物理按键来实现操作,按键加上屏幕后手机整体偏长,而进入大屏智能机时代,按键的位置被屏幕取缔,但长方形的屏幕设计依然得到 ...
android 对话框美化,Android修改Dialog样式
Android 对话框支持自定义标题,内容,按钮和点击事件,基本上可以满足我们日常的使用. 但有时候我们想要修改对话框的文字,按钮颜色等,系统并没有提供对应的方法,正常情况下只能自定义布局. 接下来通 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
element ui 的 tips 样式修改
新年三,旧三年,学完三年又三年.程序是个永远学不完的一个坑.今天就来,以前我从事8年前端开发的姐夫对我说过,css才是最难搞的什么js,ES,ts其实都不难. 当时的我不屑一顾!你怕不是在和我开玩笑哦 ...
android 自定义dialog样式,Android 自定义dialog类
首先定制style样式 styles.xml 加入自定义样式 @null true true true @color/transparent @color/transparent true 0.6 在 ...
muse ui 覆盖其样式
vue 单个页面对muse ui 某个组件样式修改,选中不到解决办法: 1,设置自己的类名,然后修改 2,写在公共样式里,对其进行覆盖

优化elelment ui 的 dialog 样式

优化elelment ui 的 dialog 样式相关推荐

最新文章

热门文章