点击链接弹出层特效_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> 代码 > 图层样式特效

点击链接弹出层特效

作者：来源：日期：2009/10/16 12:18:38 人气：标签：

点击链接弹出层特效

<!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" />
<title>div弹出层</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	}
.CityBox{
	padding:15px;
	clear:both;
	color:#333;
	border:5px solid #ccc;
	width:600px;
	height:400px;
	background:#fff;
	overflow-y:scroll;
	scrollbar-shadow-color: #ffffff; 
	scrollbar-highlight-color: #ffffff; 
	scrollbar-face-color: #d9d9d9; 
	scrollbar-3dlight-color: #d9d9d9; 
	scrollbar-darkshadow-color: #d9d9d9; 
	scrollbar-track-color: #ffffff; 
	scrollbar-arrow-color: #f30
	}
.CloseDiv{
	float:right;
	color:#fff;
	text-decoration:none;
	margin-right:0px;
	width:635px;
	text-align:right;
	}
.CloseDiv a{ color:#fff; text-decoration:none}
.LCnormaltab{ background:#000;display:block; color:#fff;}
.LChovertab{ background:#fff; color:#000;display:block;}
.LCdis{display:block;}
.LCundis{display:none;}
</style>
</head>
<body>
<a id="togglecity1" href="#">点击我1</a>
<div id="citycont1" style="display:none;">
<div id="clearcity1" onclick='city_clearDiv()' class="CloseDiv"><a href="#">关闭</a></div>
 <div class="CityBox">
 <script language="javascript" type="text/javascript">
	function t(o){return document.getElementById(o);}
	function HoverLi(n)
	{
	for(var i=1;i<=3;i++)
	{
	t('MyTab'+i).className='LCnormaltab';
	t('myTable0'+i).className='LCundis';
	}
	t('myTable0'+n).className='LCdis';
	t('MyTab'+n).className='LChovertab';
	}
	</script>
	<div id="MyTab" class="LCtit">
	 <ul>
		<li id="MyTab1" class="LChovertab" onmousemove="HoverLi(1);">1</li>
			<li id="MyTab2" class="LCnormaltab" onmousemove="HoverLi(2);">2</li>
			<li id="MyTab3" class="LCnormaltab" onmousemove="HoverLi(3);">3</li>
		</ul>
	</div>
	
	<div class="LCdis" id="myTable01">111</div>
	<div class="LCundis" id="myTable02">222</div>
	<div class="LCundis" id="myTable03">333</div>
 
 
 </div>
</div>
<a id="togglecity2" href="#">点击我2</a> 
<div id="citycont2" style="display:none;">
<div id="clearcity1" onclick='city_clearDiv()' class="CloseDiv"><a href="#">关闭</a></div>
 <div class="CityBox">
 这是里面的内容222222222222222
 </div>
</div>
<a id="togglecity3" href="#">点击我3</a> 
<div id="citycont3" style="display:none;">
<div id="clearcity1" onclick='city_clearDiv()' class="CloseDiv"><a href="#">关闭</a></div>
 <div class="CityBox">
 这是里面的内容3333333333
 </div>
</div>
<script type="text/javascript">
//控制弹出层的ID ，数字为改变弹出层的DIV
toggleCity("togglecity1","citycont1","clearcity1",600,400);
toggleCity("togglecity2","citycont2","clearcity2",600,400);
toggleCity("togglecity3","citycont3","clearcity3",600,400);
//---------------------主要部分------------------------------
		//activeObj:触发时间的元素id
		//contObj:要显示内容的id
		//clearObj:清除显示层的id
		//newDivWidth:显示层的宽度
		//newDivHeight:显示层的高度
function toggleCity(activeObj,contObj,clearObj,newDivWidth,newDivHeight){
	var ocity=document.getElementById(activeObj);
	var citycont=document.getElementById(contObj);
	var oclearcity=document.getElementById(clearObj);	
	ocity.onclick=function(){findselect();city_createDiv(citycont,newDivWidth,newDivHeight);}
}
function findselect(){//查找并隐藏select
	var oselect=document.getElementsByTagName("select");
	if(oselect.length>0){
		for(var i=0;i<oselect.length;i++){
			oselect[i].style.display="none";
		}
	}
}	
function showselect(){//显示select
	var oselect=document.getElementsByTagName("select");
	if(oselect.length>0){
		for(var i=0;i<oselect.length;i++){
			if(oselect[i].style.display=="none"){
				oselect[i].style.display="inline";
			}
		}
	}
}
function owinWidth(){//当前窗口的width
		var winWidth;
		if (window.innerWidth){
 			winWidth = window.innerWidth;
		}
 		else if ((document.body) && (document.body.clientWidth)){
 			winWidth = document.body.clientWidth;
		}
 		if (document.documentElement && document.documentElement.clientWidth){
 			winWidth = document.documentElement.clientWidth;
		}
		return winWidth;
}
function owinHeight(){//当前窗口的height
		var winHeight;
		if (window.innerHeight){
 			winHeight = window.innerHeight
		}else if ((document.body) && (document.body.clientHeight)){
 			winHeight = document.body.clientHeight
		}
		if (document.documentElement && document.documentElement.clientHeight){
 			winHeight = document.documentElement.clientHeight;
		}
		return winHeight;	
}
function city_createDiv(pinner,newDivWidth,newDivHeight){//创建背景
	var obody=document.body;
	document.documentElement.style.overflowY="auto";
	document.documentElement.style.overflowX="hidden";
	var newDiv=document.createElement("div");
	newDiv.id="bgdiv";
	
	var winWidth=owinWidth();
	var winHeight=owinHeight();
	if(obody.offsetWidth>winWidth){
		newDiv.style.width=obody.offsetWidth+"px";
	}else{
		newDiv.style.width=winWidth+'px';
	}
	if(obody.offsetHeight>winHeight){
		newDiv.style.height=obody.offsetHeight+"px";
	}else{
		newDiv.style.height=winHeight+'px';
	}
	newDiv.style.background="#000";
	newDiv.style.position="absolute";
	if(typeof(newDiv.style.filter)=="string"){
		newDiv.style.filter="alpha(opacity=60)";
	}else{
		newDiv.style.opacity="0.3";
	}
	newDiv.style.top=0;
	newDiv.style.left=0;
	var newP=city_createP(winWidth,winHeight,newDivWidth,newDivHeight);
	if(pinner){
	newP.innerHTML=pinner.innerHTML;
	}
	obody.appendChild(newDiv);
	obody.appendChild(newP);
}
function city_createP(winWidth,winHeight,newDivWidth,newDivHeight){//创建显示层
	var obody=document.body;
	var newP=document.createElement("div");
	newP.id="contdiv";
	newP.className="book_new_p";
	newP.style.width=newDivWidth+"px";
	newP.style.height=newDivHeight+"px";
	newP.style.position="absolute";
	//newP.style.background="#fff";
	newP.style.top=(winHeight-newDivHeight)/2+"px";
	newP.style.left=(winWidth-newDivWidth)/2+"px";
	return newP;
}
function city_clearDiv(){//清除生成背景和容器层
	var bgd=document.getElementById("bgdiv");
	var contd=document.getElementById("contdiv");
	document.body.removeChild(contd);
	document.body.removeChild(bgd);
	document.documentElement.style.overflowY="auto";
	showselect();
}
</script>
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</body>
</html>

代码由中国网站频道搜集整理www.v404.cn

公告

更新

> 代码 > 图层样式特效

点击链接弹出层特效