曾幾何時alert陪伴了我很多歌日日夜夜,但現在人們越來越追求高端的技術,其實慢慢的我也都快淡忘了前端的世界裡還有alert這麼一個偉大的成員。
目錄
一、為什麼抛棄了alert?
1. 不同浏覽器的表現
2. 第三方元件的使用
3. 代碼意識的控制
二、用alert實作一個精美彈窗
1. 彈窗HTML元素的布局
2. CSS部分的書寫
3. 重點的alert方法覆寫實作
4. 完整源代碼
5. 最後
一、為什麼抛棄了alert?
1. 不同浏覽器的表現
其實最初使用alert還是一個常态,包括現在很多B端平台還在直接使用alert。人們不再使用alert,大概也是因為在不同浏覽器下他的表現形式是不同的,給使用者體驗帶來了不太好的影響。但由于美工缺失或者是使用便捷易上手,當時被人們奉為法寶啊。
// js片段
alert('最初的彈窗');
不同浏覽器的表現形式大概是這樣:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL5QGMkNWMlRmNhlTO2EGN4UmNzQDO4IWYmJWZkVWZjF2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
其實還有很多浏覽器,對于這個原生的老古董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 >
<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>
5. 最後
alert幾乎已經成為一個老古董了,會有越來越多的人忘記他,不再使用他。但如果關鍵時刻你需要用到了,請記得還有一個原生方法覆寫的知識點可以用哦。