js模擬實現alert()函式彈出警告視窗效果程式碼例項

admin發表於2017-04-15
JS函式

大家都比較熟悉alert()函式的作用，可以彈出一個警告視窗，不過也有一個弱點，那就是這個彈出視窗的樣式是固定的，沒法修改，但是很多外觀要求比較高的網站對這個預設視窗自然不會滿意，為了風格的統一和美觀，模擬實現彈出視窗效果自然是必須的工作。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章