只能自定一個彈窗樣式
首先必須明白的一點是，alert只是一個方法，而這個方法內部是native code，這是我們無法修改的部分，而最終暴露的只有這個alert方法名字而已，你甚至拿不到alert的屬性，因此要真正意義上的做到修改alert樣式是不可行的。
有了以上這個條件基礎，我們能做的只有重寫alert方法，替換掉系統自帶的alert方法。
一行代碼替換alert方法
-
window.alert = function {};
看到這，就有很多人已經明了了，首先你可以先寫好一個假的彈窗樣式，然后通過這種方式顯示出來，這種是html css js 三方同時更改達到效果，你也可以全部都JavaScript去完成結構樣式的操作，今天我們的示例就是全部通過js來完成結構樣式控制。
明確了基本方式是通過替換alert方法，那么就開始進一步的思考實現步驟。
實現自定義alert方法的步驟
確定彈窗樣式HTML結構 —— 結構插入 —— 樣式控制 —— 點擊確定刪除結構
確定結構
-
<div>
-
<p>alert內容</p>
-
<div>確定</div>
-
</div>
使用JS處理結構
於是有了下面這段代碼：
-
window.alert = alert;
-
function alert(data) {
-
var a = document.createElement("div"),//創建最外圍標簽
-
p = document.createElement("p"),//創建顯示內容的p標簽
-
btn = document.createElement("div"),//創建按鈕標簽
-
textNode = document.createTextNode(data),//創建一個文字節點
-
btnText = document.createTextNode("確定");//創建文字節點
-
// 內部結構套入
-
p.appendChild(textNode);//將需要顯示的內容節點插入p標簽內
-
btn.appendChild(btnText);//將按鈕文字插入按鈕標簽
-
a.appendChild(p);//將p標簽插入外圍div
-
a.appendChild(btn);//將按鈕插入外圍div
-
// 整體顯示到頁面內
-
document.getElementsByTagName("body")[0].appendChild(a);
-
}
這 里為什么不直接用window.alert = function {};方法呢，這里考慮預編譯時並不會對window.alert進行賦值，如果用這種方式寫的話，在window.alert = function {} 之前調用alert還會是系統自帶alert。
當你初步調用alert時，如果不傳參數會報錯，那么我們需要一個data的判 斷，textNode = document.createTextNode(data)就可改成textNode = document.createTextNode(data ? data : "")
優化當前的JS代碼
接下來我們會發現，我們還缺少樣式和確定關閉功能。這里完全可以用DOM0級事件綁定。代碼很快變成了這樣：
-
window.alert = alert;
-
function alert(data) {
-
var a = document.createElement("div"),
-
p = document.createElement("p"),
-
btn = document.createElement("div"),
-
textNode = document.createTextNode(data ? data : ""),
-
btnText = document.createTextNode("確定");
-
// 內部結構套入
-
p.appendChild(textNode);
-
btn.appendChild(btnText);
-
a.appendChild(p);
-
a.appendChild(btn);
-
// 整體顯示到頁面內
-
document.getElementsByTagName("body")[0].appendChild(a);
-
// 確定綁定點擊事件刪除標簽
-
btn.onclick = function {
-
a.parentNode.removeChild(a);
-
}
-
}
樣式控制
還剩下最后一個樣式控制問題。為了寫起來更美觀更方便，我們需要寫一個方法來控制樣式。
-
function css(targetObj, cssObj) {
-
for(var i in cssObj) {
-
targetObj.style[i] = cssObj[i];
-
}
-
}
這樣我們就可以通過如下方式控制樣式：
-
css(target, {
-
“background-color” : “red”,
-
“text-align” : “center”,
-
})
wait wait，還沒完
測試后發現，如上的這種樣式書寫方式，IE8下面有渲染問題，那我們換成cssText。所以，樣式控制代碼改為——>
-
function css(targetObj, cssObj) {
-
var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
-
for(var i in cssObj) {
-
str += i + ":" + cssObj[i] + ";";
-
}
-
targetObj.style.cssText = str;
-
}
這樣咱就解決IE8的尷尬了，但是同時也帶來了其他問題，字符串拼接，有可能會出現重復屬性，因此如果你需要做一個通用的，還需要對字符串進行查重，但對於本例來說完全夠用了。
完成版的alert功能
我們的demo就成了這樣（樣式還是自己調吧，下面的樣式只是做個示范）：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5學堂 - alert</title>
-
</head>
-
<body>
-
<script>
-
window.alert = alert;
-
function alert(data) {
-
var a = document.createElement("div"),
-
p = document.createElement("p"),
-
btn = document.createElement("div"),
-
textNode = document.createTextNode(data ? data : ""),
-
btnText = document.createTextNode("確定");
-
// 控制樣式
-
css(a, {
-
"position" : "fixed",
-
"left" : "0",
-
"right" : "0",
-
"top" : "20%",
-
"width" : "100px",
-
"margin" : "0 auto",
-
"background-color" : "#f00",
-
"font-size" : "20px",
-
"text-align" : "center"
-
});
-
css(btn, {
-
"background" : "blue",
-
})
-
// 內部結構套入
-
p.appendChild(textNode);
-
btn.appendChild(btnText);
-
a.appendChild(p);
-
a.appendChild(btn);
-
// 整體顯示到頁面內
-
document.getElementsByTagName("body")[0].appendChild(a);
-
// 確定綁定點擊事件刪除標簽
-
btn.onclick = function {
-
a.parentNode.removeChild(a);
-
}
-
}
-
function css(targetObj, cssObj) {
-
var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
-
for(var i in cssObj) {
-
str += i + ":" + cssObj[i] + ";";
-
}
-
targetObj.style.cssText = str;
-
}
-
alert(123);
-
</script>
-
</body>
-
</html>
最 后總結下，本例運用到的知識點，DOM操作、預編譯期與執行、for-in循環，cssText。本文的主要目的在於引導思路，無論做什么項目，思路很重 要，要懂得變通，如果你想通過某些屬性去修改alert樣式，那你想破頭都想不出，所有效果實現方法都不是唯一的，僅僅只是需要一個你想要的alert樣 式，完全可以“造假”，合理利用“造假”的方法，可以使你的效果寫起來比別人輕松很多。