重点分析JavaScript重写alert()方法的技巧

window.alert = function(str) { 
 var alertBox = document.createElement("div"); 
 alertBox.id="alertBox"; 
 alertBox.style.position = "absolute"; 
 alertBox.style.width = "400px"; 
 alertBox.style.background = "#F2F2F2"; 
 alertBox.style.border = "1px solid grey"; 
 alertBox.style.left = "50%"; 
 alertBox.style.top = "50%"; 
 alertBox.style.transform = "translate(-50%, -50%)"; 
 alertBox.style.textAlign = "center"; 
 alertBox.style.zIndex = "100"; 
 var strHtml = ""; 
 strHtml += '<div id="title">提示：<div id="close" onclick="certainFunc()"></div></div>'; 
 strHtml += '<div id="content">'+str+'</div>'; 
 strHtml += '<div id="certain"><input id="btn" type="button" value="确 定" onclick="certainFunc()" onhover="hoverFunc()"/></div>'; 
 alertBox.innerHTML = strHtml; 
 document.body.appendChild(alertBox); 
 var title = document.getElementById("title"); 
 title.style.textAlign = "left"; 
 title.style.marginTop = "20px"; 
 title.style.paddingLeft = "20px"; 
 title.style.height = "30px"; 
 title.style.fontSize = "15px"; 
 var close = document.getElementById("close"); 
 close.style.width = "16px"; 
 close.style.height = "16px"; 
 close.style.marginRight = "20px"; 
 close.style.background = "url('images/close.png')"; 
 close.style.float = "right"; 
 var content = document.getElementById("content"); 
 content.style.margin = "20px"; 
 content.style.fontSize = "12px"; 
 var certain = document.getElementById("certain"); 
 certain.style.position = "relative"; 
 certain.style.height = "50px"; 
 certainFunc = function() { 
 alertBox.parentNode.removeChild(alertBox); 
 }; 
 var btn = document.getElementById("btn"); 
 btn.style.width = "60px"; 
 btn.style.height = "30px"; 
 btn.style.background = "#cccccc"; 
 btn.style.border = "1px solid grey"; 
 btn.style.position = "absolute"; 
 btn.style.borderRadius = "5px"; 
 btn.style.right = "20px"; 
 btn.style.bottom = "20px"; 
 btn.style.marginTop = "10px"; 
 btn.style.cursor = "pointer"; 
 btn.style.color = "#333"; 
 hoverFunc = function() { 
 btn.style.border = "1px blue solid"; 
 }; 
}

上面是我整理的重点分析JavaScript重写alert()方法的技巧给大家的，希望今后会对大家有帮助。

相关文章：

js解析数据技巧总结

原生JS封装淡入淡出效果函数步骤详解

在vue项目中使用sass的配置方法_vue.js