修改alert样式

tech2023-06-10  124

修改alert样式

参考文章: https://blog.csdn.net/tanqiaoxing/article/details/81943892.

自己写个方法替换JavaScript中原来的方法。 代码如下

window.alert = alert; function alert(data) { var a = document.createElement("div"), p = document.createElement("p"), btn = document.createElement("div"), title = document.createElement("div"), textNode = document.createTextNode(data ? data : ""), btnText = document.createTextNode("确定"); // 控制样式 css(a, { "position" : "fixed", "left" : "0", "right" : "0", "top" : "40%", "width" : "300px", "margin" : "0 auto", "color" : "#000000", "background-color" : "#fff", "border" : "1px solid #000000", "font-size" : "14px", "text-align" : "center", "z-index" : "10" }); //标题样式 css(title,{ "width" : "300px", "height": "30px", "background" : "#73C1A9", }); //按钮样式 css(btn, { "width" : "80px", "margin" : "0 auto", "margin-top" : "20px", "line-height" : "24px", "color" : "#fff", "background" : "#73C1A9", "border-radius" : "4px", "cursor" : "pointer" }); // 内部结构套入 p.appendChild(textNode); btn.appendChild(btnText); title.append("提示"); a.appendChild(title); 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; }
最新回复(0)