js模拟实现alert()函数弹出警告窗口效果代码实例
分类：实例代码
大家都比较熟悉alert()函数的作用，可以弹出一个警告窗口，不过也有一个弱点，那就是这个弹出窗口的样式是固定的，没法修改，但是很多外观要求比较高的网站对这个默认窗口自然不会满意，为了风格的统一和美观，模拟实现弹出窗口效果自然是必须的工作。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
var alertObj=new Object();
var generalStyle={
zIndex:0,
width:"200px",
height:"100px",
border:"thick solid #CCCCCC",
background:"#FFFFFF",
position:"absolute",
top:"35%",
left:"40%"
}
var txtStyle={
textAlign:"center"
}
var btnStyle={
position:"absolute",
left:"40%",
top:"70%",
color:"#333333",
fontWeight:"bold",
outlineColor:"#3366FF",
outlineStyle:"ridge",
outlineWidth:"thin",
innerHTML:"OK"
}
alertObj={
generalSet:generalStyle,
txtSet:txtStyle,
btnSet:btnStyle,
isExist:false
}
alertObj.createComponent=function(){
var component=document.createElement(arguments[0]);
var styles=arguments[1];
for(var property in styles){
if(styles[property]!=null){
try{
component.style[property]=styles[property];
}
catch(err){
document.write(err.name+":"+property+"<br/>");
}
}
}
return component;
}
alertObj.show=function(){
if(!this.isExist){
this.isExist=true;
var bodyObj=document.body;
bodyObj.style.zIndex=-1;
bodyObj.style.background="#999999";
var divObj=this.createComponent("div",this.generalSet);
var txtObj=this.createComponent("p",this.txtSet);
txtObj.innerHTML = arguments[0];
var btnObj = this.createComponent("button", this.btnSet);
btnObj.innerHTML = this.btnSet.innerHTML;
btnObj.onclick = function() {
bodyObj.style.zIndex=0;
bodyObj.style.background="";
bodyObj.removeChild(divObj);
if(alertObj.isExist){
alertObj.isExist = false;
}
}
divObj.appendChild(txtObj);
divObj.appendChild(btnObj);
bodyObj.appendChild(divObj);
}
}
function show(s){
alertObj.show(s);
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
show("前端教程网");
}
}
</script>
</head>
<body>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
js模拟实现alert()函数弹出警告窗口效果代码实例，这样的场景在实际项目中还是用的比较多的，关于js模拟实现alert()函数弹出警告窗口效果代码实例就介绍到这了。
js模拟实现alert()函数弹出警告窗口效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。