Focus on analyzing the techniques of rewriting the alert() method in JavaScript

Focus on the techniques for rewriting the alert() method in JavaScript

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";  
    };  
}

The above is the key analysis of the techniques on rewriting the alert() method on JavaScript that I compiled Everyone, I hope it will be helpful to everyone in the future.

Related articles:

Summary of js parsing data skills

Detailed explanation of the steps of the native JS encapsulation fade-in and fade-out effect function

Configuration method of using sass in vue project_vue.js

The above is the detailed content of Focus on analyzing the techniques of rewriting the alert() method in JavaScript. For more information, please follow other related articles on the PHP Chinese website!