javascript使用alert實現(xiàn)一個精美的彈窗
曾幾何時alert陪伴了我很多歌日日夜夜，但現(xiàn)在人們越來越追求高端的技術(shù)，其實慢慢的我也都快淡忘了前端的世界里還有alert這么一個偉大的成員。
一、為什么拋棄了alert?
1. 不同瀏覽器的表現(xiàn)
其實最初使用alert還是一個常態(tài)，包括現(xiàn)在很多B端平臺還在直接使用alert。人們不再使用alert，大概也是因為在不同瀏覽器下他的表現(xiàn)形式是不同的，給用戶體驗帶來了不太好的影響。但由于美工缺失或者是使用便捷易上手，當(dāng)時被人們奉為法寶啊。
// js片段
alert('最初的彈窗');不同瀏覽器的表現(xiàn)形式大概是這樣：
其實還有很多瀏覽器，對于這個原生的老古董alert方法的表現(xiàn)形式完全不一樣，慢慢的人們發(fā)現(xiàn)用戶體驗是一個必須提升的事項，所以慢慢拋棄了alert方法。
2. 第三方組件的使用
慢慢的，人們工作量加重，開始重視工作效率了，自己寫代碼工作效率低，于是開始使用各種各樣的第三方組件，extjs easysui elementui ant 等等，既然人家提供了第三方的組件，使用快速且方便，最重要的是在每個瀏覽器的表現(xiàn)形式還是一致的，所以誰還會用alert呢。
3. 代碼意識的控制
既然alert有了以上缺點，又出現(xiàn)了各種各樣符合當(dāng)代技術(shù)棧的UI組件庫，人們也逐漸產(chǎn)生了一個共有的意識，代碼里不寫alert，不寫confirm，上線不寫console.log。甚至很多授課老師也產(chǎn)生了這個意識，很多開始學(xué)前端的最初不知道有這個alert全局方法，老師覺得教了沒有意義，以后反正也不讓用了跳過吧。于是就真的把alert這個方法變成老古董了。
二、用alert實現(xiàn)一個精美彈窗
為了表示對alert的懷念，我今天就想著用alert實現(xiàn)一個各瀏覽器表現(xiàn)都一致的彈框吧，希望還有很多人看了這篇博客能夠記起這個曾經(jīng)的伙伴。
1. 彈窗HTML元素的布局
首先需要實現(xiàn)一下你需要展示的彈窗，可以看到很多被大家所熟知的彈窗組件包含頭部，身體，以及底部按鈕部分，這些都是可以用一些簡單的div p span等標(biāo)簽布局的，代碼如下：
<div class="box">
<p class="title">標(biāo)題</p>
<div class="body">這里是一個彈窗</div>
<div class="bottom">
<span onclick="hideAlert()">確定</span>
</div>
</div>2. CSS部分的書寫
這里基本就是模擬那些組件庫做一個彈窗的樣式，例如加一個圓角邊框啦，設(shè)置一下標(biāo)題區(qū)域的寬高居中啦，中間文案區(qū)域的樣式等，底部還有一個確定按鈕，這部分整體來說比較加單，代碼如下：
* {
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方法覆蓋實現(xiàn)
這里重點還是對alert方法的覆蓋，意思就是我還是調(diào)用alert()方法，但卻可以彈出讓每個瀏覽器表現(xiàn)一致的彈框，這里需要對alert方法進行重寫；
同時彈框的按鈕要具有移除彈框的功能，意思就是點擊確定按鈕，我們需要把彈框隱藏掉，這些是需要使用js來實現(xiàn)的，代碼如下：
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">標(biāo)題</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幾乎已經(jīng)成為一個老古董了，會有越來越多的人忘記他，不再使用他。但如果關(guān)鍵時刻你需要用到了，請記得還有一個原生方法覆蓋的知識點可以用哦。
到此這篇關(guān)于javascript使用alert實現(xiàn)一個精美的彈窗的文章就介紹到這了,更多相關(guān)javascript alert彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序開發(fā)之實現(xiàn)自定義Toast彈框
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生，有時候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。2017-06-06
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)簡單頁面倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)中串的表示與應(yīng)用實例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中串的表示與應(yīng)用,結(jié)合實例形式簡單分析了基于javascript順序操作實現(xiàn)串結(jié)構(gòu)與串的拼接操作相關(guān)技巧,需要的朋友可以參考下2017-04-04
這幾天不是很忙，就找了些拖動布局方面的資料看看，也學(xué)著寫了個拖動布局的效果，沒想到花了好多時間，七拼八湊，總算是把這個效果寫出來了。2010-10-10
這篇文章主要介紹的是如何利用fecha進行JS日期處理，在日常項目中，經(jīng)常會碰到日期處理的需求，這種需求千奇百怪，而且往往經(jīng)常變化。雖然js提供了原生的Date方法供我們選擇，但一些復(fù)雜的日期時間處理起來往往力不從心。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)代碼實例
我們在繪制柱狀圖時如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)的相關(guān)資料,需要的朋友可以參考下2023-11-11
js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用
對于js中eval()函數(shù)的理解和寫一個函數(shù)trim()去掉字符串左右空格;對于js中eval()函數(shù)的理解是本人心得不一定正確,感興趣的朋友參考下，或許對你學(xué)習(xí)eval()函數(shù)有所幫助2013-02-02
這篇文章主要介紹了關(guān)于List.ToArray()方法的效率測試的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序用戶授權(quán)及判斷登錄是否過期，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
mui的上拉加載和下拉刷新類似，都屬于pullRefresh插件。今天小編抽空給大家分享mui上拉加載更多下拉刷新數(shù)據(jù)的封裝過程，需要的朋友參考下吧2017-11-11