当前位置：首页 > Web前端 > CSS

弹窗的实现（自制）

时间：2023-03-30 16:51:14 CSS

@importurl("https://unpkg.com/element-ui/lib/theme-chalk/index.css");

自制弹窗，了解实现原理

首页内容

用户列表：

显示对话框

添加用户关闭

确定取消

/*全局样式*/body{background-color:#00FFFF;}/**下面四种样式是制作弹窗所需要的最少样式控件。当然你可以在此基础上优化addUseraddUserBackground。它们是最关键的两个部分。只需记住一开始的样式控件即可。后续理解完，回过头来就明白了**//*隐藏弹窗*/#addUserDialog{display:none;}/*弹窗样式*/.addUser{width:400px;高度：300px；背景色：#fff；边框：1px实心#000；位置：固定；左：50%；顶部：50%；左边距：-200px；边距顶部：-150px；/*层级*/z-index:9999;}/*弹窗背景灰度*/.addUserBackground{position:fixed;宽度：100%；高度：100%；背景色：#000；左：0；顶部：0；/*透明度*/不透明度：0.3；/*兼容ie*/filter:alpha(opacity=30);z-指数：9990；}#addUserClose{文本装饰：无；位置：绝对；右：10px；顶部：10px；}

上一篇：CSS布局系列一——盒子模型布局

下一篇：【CSS】了解REM移动端适配解决方案

弹窗的实现（自制）相关文章