javascript怎么使用alert实现一个精美的弹窗
这篇文章主要讲解了“javascript怎么使用alert实现一个精美的弹窗”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript怎么使用alert实现一个精美的弹窗”吧！
一、为什么抛弃了alert?
1. 不同浏览器的表现
其实最初使用alert还是一个常态，包括现在很多B端平台还在直接使用alert。人们不再使用alert，大概也是因为在不同浏览器下他的表现形式是不同的，给用户体验带来了不太好的影响。但由于美工缺失或者是使用便捷易上手，当时被人们奉为法宝啊。
// js片段alert('最初的弹窗');不同浏览器的表现形式大概是这样：
其实还有很多浏览器，对于这个原生的老古董alert方法的表现形式完全不一样，慢慢的人们发现用户体验是一个必须提升的事项，所以慢慢抛弃了alert方法。
2. 第三方组件的使用
慢慢的，人们工作量加重，开始重视工作效率了，自己写代码工作效率低，于是开始使用各种各样的第三方组件，extjs easysui elementui ant 等等，既然人家提供了第三方的组件，使用快速且方便，最重要的是在每个浏览器的表现形式还是一致的，所以谁还会用alert呢。
3. 代码意识的控制
既然alert有了以上缺点，又出现了各种各样符合当代技术栈的UI组件库，人们也逐渐产生了一个共有的意识，代码里不写alert，不写confirm，上线不写console.log。甚至很多授课老师也产生了这个意识，很多开始学前端的最初不知道有这个alert全局方法，老师觉得教了没有意义，以后反正也不让用了跳过吧。于是就真的把alert这个方法变成老古董了。
二、用alert实现一个精美弹窗
为了表示对alert的怀念，我今天就想着用alert实现一个各浏览器表现都一致的弹框吧，希望还有很多人看了这篇博客能够记起这个曾经的伙伴。
1. 弹窗HTML元素的布局
首先需要实现一下你需要展示的弹窗，可以看到很多被大家所熟知的弹窗组件包含头部，身体，以及底部按钮部分，这些都是可以用一些简单的div p span等标签布局的，代码如下：
<div class="box"> <p class="title">标题</p> <div class="body">这里是一个弹窗</div> <div class="bottom"> <span onclick="hideAlert()">确定</span> </div></div>2. CSS部分的书写
这里基本就是模拟那些组件库做一个弹窗的样式，例如加一个圆角边框啦，设置一下标题区域的宽高居中啦，中间文案区域的样式等，底部还有一个确定按钮，这部分整体来说比较加单，代码如下：
* { margin: 0; padding: 0;}.box { display: none; margin: 100px; width: 396px; height: 180px; border:1px solid #EEE; border-radius: 10px;}.title { height: 40px; padding-left: 20px; font-size: 18px; font-weight: bold; line-height: 40px; background: #0052d9; border-radius: 10px 10px 0 0; color: #FFF;}.body { height: 100px; background: url(./bg.gif) repeat; text-align: center; color: #FFF; line-height: 100px;}.bottom { height: 40px; text-align: center;}.bottom span { margin-top: 5px; display: inline-block; width: 100px; height: 30px; border-radius: 10px; text-align: center; line-height: 30px;}3. 重点的alert方法覆盖实现
这里重点还是对alert方法的覆盖，意思就是我还是调用alert()方法，但却可以弹出让每个浏览器表现一致的弹框，这里需要对alert方法进行重写；
同时弹框的按钮要具有移除弹框的功能，意思就是点击确定按钮，我们需要把弹框隐藏掉，这些是需要使用js来实现的，代码如下：
let alertBox = document.querySelector('.box');function alert() { alertBox.style.display = 'block';}alert(); function hideAlert() { alertBox.style.display = 'none';}
4. 完整源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>alert弹窗</title> <style> * { margin: 0; padding: 0; } .box { display: none; margin: 100px; width: 396px; height: 180px; border:1px solid #EEE; border-radius: 10px; } .title { height: 40px; padding-left: 20px; font-size: 18px; font-weight: bold; line-height: 40px; background: #0052d9; border-radius: 10px 10px 0 0; color: #FFF; } .body { height: 100px; background: url(./bg.gif) repeat; text-align: center; color: #FFF; line-height: 100px; } .bottom { height: 40px; text-align: center; } .bottom span { margin-top: 5px; display: inline-block; width: 100px; height: 30px; border-radius: 10px; text-align: center; line-height: 30px; } </style></head><body> <div class="box"> <p class="title">标题</p> <div class="body">这里是一个弹窗</div> <div class="bottom"> <span onclick="hideAlert()">确定</span> </div> </div> <script> let alertBox = document.querySelector('.box'); function alert() { alertBox.style.display = 'block'; } alert(); function hideAlert() { alertBox.style.display = 'none'; } </script></body>感谢各位的阅读，以上就是“javascript怎么使用alert实现一个精美的弹窗”的内容了，经过本文的学习后，相信大家对javascript怎么使用alert实现一个精美的弹窗这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
