JS代碼實現(xiàn)DIV層提示效果

【實例名稱】

div層提示效果

【實例描述】

當(dāng)頁面出現(xiàn)錯誤的時候，通常使用alert或者窗口給用戶彈出錯誤信息，但這樣會影響用戶的操作。為了方便地顯示錯誤信息，本例學(xué)習(xí)使用div層顯示錯誤信息。

【實例代碼】

<script language=javascript>
var div_x,div_y;
function div6() 
{
    this.display=display; 
}
//實現(xiàn)層和表格的動態(tài)創(chuàng)建
function display() 
{
  document.write("<table align=center><tr><td><button 
style='width:100px;height:30px;font-size:12px;border:1px 
solid #A4B3C8;background-color:green;' type=button onclick=
document.getElementById('div1').style.display='block' 
onfocus=this.blur()>div留言</button></td></tr></table>");
  document.write("<div  id='div1' style='font-size:12px;
position:absolute;display:none;text-align:center;overflow:visible'>");
  document.write("<div style='position:absolute;top:expression
((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);
width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
  document.write("<table width=200 height=20 bgcolor=green 
onmousedown='div_x=event.x-parentNode.style.pixelLeft;div_y=
event.y-parentNode.style.pixelTop;setCapture();' 
onmouseup='releaseCapture();' onmousemove='divMove(this.parentNode)' 
style='cursor:move;'>");
  document.write("<tr align=center>");
  document.write("<td align=left>提示:div6</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<span style= cursor:hand onclick=this.
parentNode.parentNode.style.display='none';><br>發(fā)生了嚴重的錯誤...
<br>[返回]</span>");
  document.write("  </div>");
  document.write("</div>");
}
//實現(xiàn)層的拖移
function divMove(obj)  
{
  if(event.button==1)
  {
    var divX=obj.clientLeft;
    var divY=obj.clientTop;
    obj.style.pixelLeft=divX+(event.x-div_x);
    obj.style.pixelTop=divY+(event.y-div_y);
  }
}
//創(chuàng)建并顯示層
var mydiv=new div6();
mydiv.display();
</script>【運行效果】

單擊“返回”按鈕，此提示會自動消失，還可以通過拖動提示消息的標(biāo)題欄，實現(xiàn)div層的移動。

【難點剖析】

本例的重點是div層的動態(tài)創(chuàng)建和控制。使用“document.write”動態(tài)創(chuàng)建層，然后使用樣式的“style．display”屬性來控制層的隱藏或顯示。當(dāng)“style．display”的值為“none'’的隱藏層，為“block'’時顯示層。

【源碼下載】

下載本實例源碼