如何用alert制作一个华丽丽的弹窗效果？

本文共计1510个文字，预计阅读时间需要7分钟。

目录

一、为什么抛弃了alert？

1.不同浏览器的表现

2.第三方组件的使用

3.代码语义的控制

二、用alert实现一个美丽的弹窗

1.弹窗HTML元素的布局

2.CSS部分的书写

3.重点的alert方法覆盖实现

目录

• 一、为什么抛弃了alert?
• 1. 不同浏览器的表现
• 2. 第三方组件的使用
• 3. 代码意识的控制
• 二、用alert实现一个精美弹窗
• 1. 弹窗HTML元素的布局
• 2. CSS部分的书写
• 3. 重点的alert方法覆盖实现
• 4. 完整源代码
• 5. 最后

曾几何时alert陪伴了我很多歌日日夜夜，但现在人们越来越追求高端的技术，其实慢慢的我也都快淡忘了前端的世界里还有alert这么一个伟大的成员。

一、为什么抛弃了alert?

1. 不同浏览器的表现

其实最初使用alert还是一个常态，包括现在很多B端平台还在直接使用alert。人们不再使用alert，大概也是因为在不同浏览器下他的表现形式是不同的，给用户体验带来了不太好的影响。