用 js和css弹出层
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>factly弹出层</title>
<style type="text/css">
<!--
.tittleup {
font-size:14px;
font-weight:bold;
color:#000066;
padding-left:25px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d0daec;
margin-bottom: 10px;
padding-bottom: 10px;
}
.od {
float:right;
font-size:14px;
color: #CC0000;
text-decoration: none;
}
.od:hover {
color:#FF0000;
}
.fd {
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:200px;
top:30px;
z-index: 10;
}
.contentup {
padding:20px;
}
}
-->
</style>
</head>
<body >
<div> <a href="#" onclick = "show('fd',650,300);return false;"> [打开层] </a> </div>
<label>
<select name="select">
<option>哈哈</option>
<option>哈哈哈哈</option>
<option>哈哈哈哈哈哈</option>
<option>哈哈哈哈哈哈哈哈</option>
<option>哈哈</option>
<option>哈哈哈哈</option>
<option>哈哈哈哈哈哈</option>
<option>哈哈哈哈哈哈哈哈</option>
<option>哈哈</option>
<option>哈哈哈哈</option>
<option>哈哈哈哈哈哈</option>
<option>哈哈哈哈哈哈哈哈</option>
</select>
</label>
aaaaaa
aaaaa
aaaaa
aaaa
aaaa
aaaaaa
<input name="" type="text">
<label>
<input type="checkbox" name="checkbox2" value="checkbox">
</label>
<div id="fd" class="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;">
关 闭 </a>
<div id="tittleup" class="tittleup">factly哈哈</div>
kwg kwg
<label>
<input type="checkbox" name="checkbox" value="checkbox">
</label>
<input name="" type="text">
<input name="" type="text">
<input name="" type="text">
<label>aaa
<select name="select">
<option>哈哈</option>
<option>哈哈哈哈</option>
<option>哈哈哈哈哈哈</option>
<option>哈哈哈哈哈哈哈哈</option>
<option>哈哈</option>
<option>哈哈哈哈</option>
<option>哈哈哈哈哈哈</option>
<option>哈哈哈哈哈哈哈哈</option>
<option>哈哈</option>
<option>哈哈哈哈</option>
<option>哈哈哈哈哈哈</option>
<option>哈哈哈哈哈哈哈哈</option>
</select>
</label>
</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
var isIe=(document.all)?true:false;
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
//关闭窗口
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('');
}
}
/*--打开Div--*/
/*参数说明：id是div的ID、divWidth是弹出层的宽度、divHeight是弹出层的高度*/
function show(id,divWidth,divHeight)
{
closeWindow();
var bWidth = parseInt(document.body.scrollWidth);
var bHeight=parseInt(window.screen.height-document.body.scrollHeight);
if(isIe)
{
setSelectState('');
}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#D9D9D9;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,divWidth,divHeight)},10);
}
/*--打开x--*/
function openx(o,openWidth,openHeight)
{
var cx = parseInt(o.style.width);
if(cx < openWidth)
{
o.style.width = (cx + Math.ceil((openWidth-cx)/1)) +"px";
}
else
{
clearInterval(prox);
proy = setInterval(function(){openy(o,openHeight)},10);
}
}
function openy(o,c){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy < c)
{
o.style.height = (cy + Math.ceil((c-cy)/10)) +"px";
}
else
{
clearInterval(proy);
}
}
/*--关闭Div--*/
function closeed(id)
{
closeWindow();
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block")
{
proyc = setInterval(function(){closey(o)},10);
}
}
/*--关闭y--*/
function closey(o)
{
var cy = parseInt(o.style.height);
if(cy > 0)
{
o.style.height = (cy - Math.ceil(cy/10)) +"px";
}
else
{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
/*--打开x--*/
function closex(o)
{
clearInterval(proxc);
o.style.display = "none";
}
</script>
</body>
</html>
