我们在之前的文章中给大家介绍了javascript中alert()的使用详解，我们都知道javascript中alert()弹出消息对话框，并且alert消息对话框通常用于一些对用户的提示信息，他的样式一直是默认的，那么我能不能修改他的样式呢，今天就带大家学习下javascript修改alert样式的方法介绍！
javascript修改alert样式的方法介绍
<script language="javascript" type="text/javascript">
window.alert = function(txt)
{
var shield = document.createelement("div");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = document.body.scrollheight+"px";
shield.style.background = "#333";
shield.style.textalign = "center";
shield.style.zindex = "10000";
shield.style.filter = "alpha(opacity=0)";
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.background = "#ccc";
alertfram.style.textalign = "center";
alertfram.style.lineheight = "150px";
alertfram.style.zindex = "10001";
strhtml = "<ul style="list-style:none;margin:0px;padding:0px;width:100%"> ";
strhtml += " <li style="background:#dd828d;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #f9cade;">[系统提示]</li> ";
strhtml += " <li style="background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #f9cade;border-right:1px solid #f9cade;">"+txt+"</li> ";
strhtml += " <li style="background:#fdeef4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #f9cade;">
<input type="button" value="确 定" onclick="dook()" /></li> ";
strhtml += "</ul> ";
alertfram.innerhtml = strhtml;
document.body.appendchild(alertfram);
document.body.appendchild(shield);
var c = 0;
this.doalpha = function(){
if (c++ > 20){clearinterval(ad);return 0;}
shield.style.filter = "alpha(opacity="+c+");";
}
var ad = setinterval("doalpha()",5);
this.dook = function(){
alertfram.style.display = "none";
shield.style.display = "none";
}
alertfram.focus();
document.body.onselectstart = function(){return false;};
}
</script>
总结：
通过对本文学习和了解，我们可以看出javascript中的alert()的样式可以修改，小伙伴么如果在工作遇到的话，可以借鉴本文，希望对你有所帮助！
相关推荐:
javascript中alert()的使用说明
javascript中的alert()函数弹出、测试技巧、发出警示用法详解
javascript中alert()与console.log()的区别
以上就是javascript修改alert样式的方法介绍的详细内容。