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 += &#39;<div id="title">提示：<div id="close" onclick="certainFunc()"></div></div>&#39;;  
    strHtml += &#39;<div id="content">&#39;+str+&#39;</div>&#39;;  
    strHtml += &#39;<div id="certain"><input id="btn" type="button" value="确 定" onclick="certainFunc()" onhover="hoverFunc()"/></div>&#39;;  
    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(&#39;images/close.png&#39;)";  
    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";  
    };  
}