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()函数弹出警告窗口效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容