弹出DIV层自适应居中显示-窗口特效-网页特效

2024/4/20   星期六
设为首页   收藏本页
用户注册   用户登陆

4当前位置：网页特效首页－窗口特效－弹出DIV层自适应居中显示

4网页特效分类

时间特效　　文本特效
状态标题　　背景特效
导航菜单　　图片特效
窗口特效　　按钮特效
鼠标特效　　 CSS特效
表单特效　　综合特效

4本站推荐内容

弹出DIV层自适应居中显示

类别：窗口特效　来源：本站原创　添加时间：2017/4/12　浏览次数：11101

<!DOCTYPE html>
<html>
<head>
<title>弹出DIV层自适应居中显示-窗口特效-网页特效-站长新动力-msxindl.com</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style type="text/css">
.opendiv{z-index:100;overflow:auto;position:absolute;padding:1px;border:1px solid #888;background:#fff;border-radius:5px;visibility:hidden;}
#bgdiv{z-index:99;width:100%;height:100%;position:absolute;top:0;left:0;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;;visibility:hidden;background:#000;}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function openDiv(obj){
	if(!$(obj)) return false;
	var b = $('bgdiv');
	var d = $(obj);
	b.style.visibility='visible';
	d.style.visibility='visible';
	var wd=window.top.document.documentElement.clientWidth-d.offsetWidth;
	var ht=window.top.document.documentElement.clientHeight-d.offsetHeight;
	d.style.left=(wd/2)+'px';
	d.style.top=(ht/2)+'px';
	window.onresize=function(){openDiv(obj);};
	b.onclick=function(){closeDiv(obj);window.onresize=null;};  //点击背景关闭弹出层
}
//关闭弹出层
function closeDiv(obj){
	var b = $('bgdiv');
	var d = $(obj);
	b.style.visibility='hidden';
	d.style.visibility='hidden';
}
</script>
</head>
<body>
<input type="button" onclick="openDiv('div1')" value="点击弹出层1" />
<div id="div1" class="opendiv">
	弹出DIV层居中显示，自适应弹出层的高度和宽度，窗口大小改变时也能自适应保持居中<br />
	弹出DIV层居中显示，自适应弹出层的高度和宽度，窗口大小改变时也能自适应保持居中<br />
	弹出DIV层居中显示，自适应弹出层的高度和宽度，窗口大小改变时也能自适应保持居中<br />
	弹出DIV层居中显示，自适应弹出层的高度和宽度，窗口大小改变时也能自适应保持居中<br />
</div>
<div id="bgdiv"></div>
</body>
</html>

上一篇窗口特效：

下一篇窗口特效：

4最新窗口特效

·弹出DIV层自适应居中显示

4热门窗口特效

·弹出DIV层自适应居中显示

本站部分内容收集整理于网络，如有问题请随时联系站长

，本站将在第一时间内进行处理！
设为首页收藏本站友情链接蜀ICP备08103254号-1 川公网安备51140202000211号最佳浏览环境：IE7.0及以上 1024px×768px

百度统计 51LA统计