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

弹窗的实现（自制）

时间：2023-04-02 19:04:27 HTML

@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；}

上一篇：Y分钟速成html

下一篇：观察者模式在OneOrder回调函数中的应用

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