仿XP关机效果的弹出窗口功能

< style >  
html,body{font - size:12px;margin:0px;height: 100 % ;} 
.mesWindow{border:# 666  1px solid;background:#fff;} 
.mesWindowTop{border - bottom:#eee 1px solid;margin - left:4px;padding:3px;font - weight:bold;text - align:left;font - size:12px;} 
.mesWindowContent{margin:4px;font - size:12px;} 
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text - decoration:underline;background:#fff} 
</ style >  
< script >  
var  isIe = (document.all) ? true : false ; 
// 设置select的可见状态 
function  setSelectState(state) 
{ 
  var  objl = document.getElementsByTagName( ' select ' ); 
  for ( var  i = 0 ;i < objl.length;i ++ ) 
 { 
 objl[i].style.visibility = state; 
 } 
} 
function  mousePosition(ev) 
 { 
  if (ev.pageX  ||  ev.pageY) 
 { 
  return  {x:ev.pageX, y:ev.pageY}; 
 } 
  return  { 
 x:ev.clientX  +  document.body.scrollLeft  -  document.body.clientLeft,y:ev.clientY  +  document.body.scrollTop  -  document.body.clientTop 
 }; 
 } 
// 弹出方法 
function  showMessageBox(wTitle,content,pos,wWidth) 
{ 
 closeWindow(); 
  var  bWidth = parseInt(document.documentElement.scrollWidth); 
  var  bHeight = parseInt(document.documentElement.scrollHeight); 
  if (isIe){ 
 setSelectState( ' hidden ' );} 
  var  back = document.createElement( " div " ); 
 back.id = " back " ; 
  var  styleStr = " top:0px;left:0px;position:absolute;background:#666;width: " + bWidth + " px;height: " + bHeight + " px; " ; 
 styleStr += (isIe) ? " filter:alpha(opacity=0); " : " opacity:0; " ; 
 back.style.cssText = styleStr; 
 document.body.appendChild(back); 
 showBackground(back, 50 ); 
  var  mesW = document.createElement( " div " ); 
 mesW.id = " mesWindow " ; 
 mesW.className = " mesWindow " ; 
 mesW.innerHTML = " <div class='mesWindowTop'><table width='100%' height='100%'><tr><td> " + wTitle + " </td><td style='width:1px;'><input type='button' οnclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'> " + content + " </div><div class='mesWindowBottom'></div> " ; 
 
 styleStr = " left: " + (((pos.x - wWidth) > 0 ) ? (pos.x - wWidth):pos.x) + " px;top: " + (pos.y) + " px;position:absolute;width: " + wWidth + " px; " ; 
 mesW.style.cssText = styleStr; 
 document.body.appendChild(mesW); 
} 
// 让背景渐渐变暗 
  function  showBackground(obj,endInt) 
{ 
  if (isIe) 
 { 
 obj.filters.alpha.opacity += 1 ; 
  if (obj.filters.alpha.opacity < endInt) 
 { 
 setTimeout( function (){showBackground(obj,endInt)}, 5 ); 
 } 
 } else { 
  var  al = parseFloat(obj.style.opacity);al += 0.01 ; 
 obj.style.opacity = al; 
  if (al < (endInt / 100 )) 
 {setTimeout( function (){showBackground(obj,endInt)}, 5 );} 
 } 
} 
// 关闭窗口 
function  closeWindow() 
{ 
  if (document.getElementById( ' back ' ) != null ) 
 { 
 document.getElementById( ' back ' ).parentNode.removeChild(document.getElementById( ' back ' )); 
 } 
  if (document.getElementById( ' mesWindow ' ) != null ) 
 { 
 document.getElementById( ' mesWindow ' ).parentNode.removeChild(document.getElementById( ' mesWindow ' )); 
 } 
 
  if (isIe){ 
 setSelectState( '' );} 
} 
// 测试弹出 
function  testMessageBox(ev) 
{ 
  var  objPos  =  mousePosition(ev); 
 messContent = " <div style='padding:20px 0 20px 0;text-align:center'>中国站长站</div> " ; 
 showMessageBox( ' 窗口标题 ' ,messContent,objPos, 350 ); 
} 
</ script >  
</ head >  
< body >  
< div style = " padding:20px " >  
< div style = " text-align:left " ; >< a href = " #none "  onclick = " testMessageBox(event); " ></ a ></ div >  
< div style = " text-align:left;padding-left:20px;padding-top:10px " ; >< select ID = " Select1 "  NAME = " Select1 " >< option > 下拉 </ option ></ select > 弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框 </ div >  
< div style = " text-align:center " ; >< a href = " #none "  onclick = " testMessageBox(event); " > 弹出窗口 </ a ></ div >  
< div style = " text-align:right " ; >< a href = " #none "  onclick = " testMessageBox(event); " > 弹出窗口 </ a ></ div >  
</ div >  
</ body >  
</ html >