首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

打开页面弹出一层DIV 的成效

2012-07-31 
打开页面弹出一层DIV 的效果谁给调一下 像一号店那样的效果这个应咱写才能弄成他那样的 打开页面时出显示

打开页面弹出一层DIV 的效果
谁给调一下 像一号店那样的效果 这个应咱写才能弄成他那样的 打开页面时出显示这个页面点击出现的样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<style>
.ie{width:400px; background-color:#FFFFFF; border:1px solid #000000; padding:20px; overflow:hidden; display:none}
</style>
<title>无标题文档</title>  
  
<script language="JavaScript" type="text/javascript">  
//|------------------------------------------------  
//|  
//| 说明:JS弹出全屏遮盖的对话框(弹出层后面有遮盖效果,兼容主流浏览器)  
//| 实现了在最大化、拖动改变窗口大小和拖动滚动条时都可居中显示。  
//|  
//| 注意:主要使用EV_modeAlert和EV_closeAlert这两个函数行了;  
//| (EV_modeAlert-弹出对话框,EV_closeAlert-关闭对话框);  
//| 注意:使用时,请在body标签内(不要在其它元素内)写一div,  
//| 再给这div赋一id属性,如:id="myMsgBox",  
//| 然后就可以调用EV_modeAlert('myMsgBox')来显示了。  
//| 还有,请给你这div设置css:display:none让它在开始时不显示。  

//|------------------------------------------------  
//|  
//用来记录要显示的DIV的ID值
var EV_MsgBox_ID=""; 
//重要  
//弹出对话窗口(msgID-要显示的div的id) 
function 
  EV_modeAlert(msgID)
 {  
  //创建大大的背景框  
  var bgObj=document.createElement("div");  
  bgObj.setAttribute('id','EV_bgModeAlertDiv');  
  document.body.appendChild(bgObj);  
  //背景框满窗口显示  
  EV_Show_bgDiv();  
  //把要显示的div居中显示  
  EV_MsgBox_ID=msgID;  
  EV_Show_msgDiv();  
}  
//关闭对话窗口  
function EV_closeAlert(){  
  var msgObj=document.getElementById(EV_MsgBox_ID);  
  var bgObj=document.getElementById("EV_bgModeAlertDiv");  
  msgObj.style.display="none";  
  document.body.removeChild(bgObj);  
  EV_MsgBox_ID="";  
}  
  
//窗口大小改变时更正显示大小和位置  
window.onresize=function(){  
  if (EV_MsgBox_ID.length>0){  
  EV_Show_bgDiv();  
  EV_Show_msgDiv();  
  }  
}  
  
//窗口滚动条拖动时更正显示大小和位置  
window.onscroll=function(){  
  if (EV_MsgBox_ID.length>0){  
  EV_Show_bgDiv();  
  EV_Show_msgDiv();  
  }  
}  
  
//把要显示的div居中显示  
function EV_Show_msgDiv(){  
  var msgObj = document.getElementById(EV_MsgBox_ID);  
  msgObj.style.display = "block";  
  var msgWidth = msgObj.scrollWidth;  
  var msgHeight= msgObj.scrollHeight;  
  var bgTop=EV_myScrollTop();  
  var bgLeft=EV_myScrollLeft();  
  var bgWidth=EV_myClientWidth();  
  var bgHeight=EV_myClientHeight();  
  var msgTop=bgTop+Math.round((bgHeight-msgHeight)/2);  
  var msgLeft=bgLeft+Math.round((bgWidth-msgWidth)/2);  
  msgObj.style.position = "absolute";  
  msgObj.style.top = msgTop+"px";  
  msgObj.style.left = msgLeft+"px";  
  msgObj.style.zIndex = "10001";  


   
}  
//背景框满窗口显示  
function EV_Show_bgDiv(){  
  var bgObj=document.getElementById("EV_bgModeAlertDiv");  
  var bgWidth=EV_myClientWidth();  
  var bgHeight=EV_myClientHeight();  
  var bgTop=EV_myScrollTop();  
  var bgLeft=EV_myScrollLeft();  
  bgObj.style.position = "absolute";  
  bgObj.style.top = bgTop+"px";  
  bgObj.style.left = bgLeft+"px";  
  bgObj.style.width = bgWidth + "px";  
  bgObj.style.height = bgHeight + "px";  
  bgObj.style.zIndex = "10000";  
  bgObj.style.background = "#777";  
  bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";  
  bgObj.style.opacity = "0.6";  
}  
//网页被卷去的上高度  
function EV_myScrollTop(){  
  var n=window.pageYOffset  
  || document.documentElement.scrollTop  
  || document.body.scrollTop || 0;  
  return n;  
}  
//网页被卷去的左宽度  
function EV_myScrollLeft(){  
  var n=window.pageXOffset  
  || document.documentElement.scrollLeft  
  || document.body.scrollLeft || 0;  
  return n;  
}  
//网页可见区域宽  
function EV_myClientWidth(){  
  var n=document.documentElement.clientWidth  
  || document.body.clientWidth || 0;  
  return n;  
}  
//网页可见区域高  
function EV_myClientHeight(){  
  var n=document.documentElement.clientHeight  
  || document.body.clientHeight || 0;  
  return n;  
}
</script>  
  
</head>  
<body>  
  <input type="button" value="弹出对话框" onclick="EV_modeAlert('envon')" /><br />  
  <div style="width:700px; height:600px; border:1px solid #333333; margin:20px 0; line-height:300%; padding:30px;">  
  百度百科是百度为网友提供的信息存储空间,是一部内容开放、自由的网络百科全书。  
  百度百科本着平等、协作、分享、自由的互联网精神,提倡网络面前人人平等,所有人共同协作编写百科全书,  
  让知识在一定的技术规则和文化脉络下得以不断组合和拓展。为用户提供一个创造性的网络平台,  
  强调用户的参与和奉献精神,充分调动互联网所有用户的力量,汇聚上亿用户的头脑智慧,积极进行交流和分享,  
  同时实现与搜索引擎的完美结合,从不同的层次上满足用户对信息的需求。  
  </div>  
  <!-- 下面这个div将会被弹出显示,其内容和样式自行编写 -->  
  <div id="envon" class="ie">  
  <div style="text-align:right"><a href="javascript:EV_closeAlert()">关闭</a></div>  
  <div><p>Our name was inspired by a poem written  
  more than 800 years ago during the Song Dynasty.  
  The poem compares the search for a retreating beauty amid chaotic glamour with  
  the search for one's dream while confronted by life's many obstacles.</p>  
  </div> 
</body>  
</html>


[解决办法]
难道你要的这样的效果:

JScript code
window.onload = function(){    EV_modeAlert('envon');} 

热点排行