通过重写alert方法，重新定义弹窗样式

最新推荐文章于 2024-07-16 20:50:05 发布

Corp_Marcheon

最新推荐文章于 2024-07-16 20:50:05 发布

阅读量2.4k

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/Corp_Marcheon/article/details/78960360

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

话不多说上JS

//弹窗更改样式的js
//配合zh-cn.default.css 使用
window.alert = function(str)
{
var shield = document.createElement("DIV"); 
shield.id = "shield"; 
shield.style.height = document.body.scrollHeight+"px";
shield.style.background = "#fff"; 
shield.style.textAlign = "center"; 
shield.style.zIndex = "25";
var alertFram = document.createElement("DIV"); 
alertFram.id="alertFram"; 
alertFram.style.position = "absolute"; 
alertFram.style.left = "50%"; 
alertFram.style.top = "50%"; 
alertFram.style.marginLeft = "-225px"; 
alertFram.style.marginTop = "-75px"; 
alertFram.style.width = "450px"; 
alertFram.style.height = "150px";
alertFram.style.textAlign = "center"; 
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "300";
strHtml = "<div class=\"modal-dialog\" style=\"text-align: left;line-height: 20px;\">\n";
strHtml += "<div class=\"modal-content\">\n";
strHtml += "<div class=\"modal-body\">\n";
strHtml += "<button type=\"button\" class=\"bootbox-close-button close\" onclick=\"doOk()\" data-dismiss=\"modal\" aria-hidden=\"true\" style=\"margin-top: -10px;\">×</button>\n";
strHtml += "<div class=\"bootbox-body\">"+str+"</div>";
strHtml += "</div>\n";
strHtml += "<div class=\"modal-footer\">\n";
strHtml += "<button data-bb-handler=\"ok\" type=\"button\" onclick=\"doOk()\" class=\"btn btn-primary\">确认</button>\n";
strHtml += "</div>\n";
strHtml += "</div>\n";
strHtml += "</div>\n";
alertFram.innerHTML = strHtml; 
document.body.appendChild(alertFram); 
document.body.appendChild(shield);
this.doOk = function(){ 
alertFram.style.display = "none"; 
shield.style.display = "none"; 
} 
alertFram.focus(); 
document.body.onselectstart = function(){return false;}; 
}