popup弹窗(备忘)

最新推荐文章于 2023-09-12 16:11:50 发布

简生

最新推荐文章于 2023-09-12 16:11:50 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： function xhtml 浏览器 filter html null

本文链接：https://blog.csdn.net/jiancm2001/article/details/7660294

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!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=utf-8"/>
<title> new document </title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
#btn {
	text-align:center;
	margin:2px 1px;
	border: 1px solid #aaa;
	border-radius: 5px;
	box-shadow:#555 1px 1px 5px;
	cursor:pointer;
	width:80px;
	height:20px;
}
#bg {
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	background:#000;
	opacity:0.5;
	filter: alpha(opacity=50);
	z-index:1;
}
#cont {
	display:none;
	position:absolute;
	width:350px;
	height:250px;
	border:1px solid #312312;
	border-radius: 5px;
	background:#fff;;
	z-index:2;
}
#close {
	width:20px;
	height:20px;
	border:1px solid #312312;
	background:#ccc;
	float:right;
	cursor:pointer;
}
</style>
</head>

<body>

<div id="container">
	<img src="http://www.placehold.it/350x250">
	<img src="http://www.placehold.it/350x250/FF0000">
	<img src="http://www.placehold.it/350x250/00FF00">
	<img src="http://www.placehold.it/350x250/F0F0F0">
	<img src="http://www.placehold.it/350x250/0000FF">
	<img src="http://www.placehold.it/350x250">
	<img src="http://www.placehold.it/350x250/FF0000">
	<img src="http://www.placehold.it/350x250/00FF00">
	<img src="http://www.placehold.it/350x250/F0F0F0">
	<img src="http://www.placehold.it/350x250/0000FF">
	<img src="http://www.placehold.it/350x250"><div id="btn">
	点击我吧
</div>
	<img src="http://www.placehold.it/350x250/FF0000">
	<img src="http://www.placehold.it/350x250/00FF00">
	<img src="http://www.placehold.it/350x250/F0F0F0">
	<img src="http://www.placehold.it/350x250/0000FF">
	<img src="http://www.placehold.it/350x250">
	<img src="http://www.placehold.it/350x250/FF0000">
	<img src="http://www.placehold.it/350x250/00FF00">
	<img src="http://www.placehold.it/350x250/F0F0F0">
	<img src="http://www.placehold.it/350x250/0000FF">
</div>

<div id="bg">
</div>
<div id="cont">
<div id="close">X</div>
我是一个浮动层！
</div>

<script type="text/javascript">

function getStyle(elem, styleName){
	if(elem.currentStyle) {
		getStyle = function(elem, styleName) {
			return elem.style[styleName] ? elem.style[styleName] : elem.currentStyle[styleName];
		}
	} else if(window.getComputedStyle) {
		getStyle = function(elem, styleName) {
			return elem.style[styleName] ? elem.style[styleName] : window.getComputedStyle(elem, null)[styleName];
		}
	} else {
		getStyle = function(elem, styleName) {
			return elem.style[styleName];
		}
	}
	return getStyle(elem, styleName);
}

/*
document.body.scrollTop + document.documentElement.scrollTop 因为两个值总有一个为0，所以兼容个浏览器。
document.documentElement.scrollHeight 兼容各浏览器的页面可视高度
*/
window.onload = function() {
	var domBg = document.getElementById("bg"),
		domCont = document.getElementById("cont"),
		domBtn = document.getElementById("btn"),
		domClose = document.getElementById("close");
	domBtn.onclick = function() {
		var contLeft = (document.documentElement.clientWidth - parseInt(getStyle(domCont, "width"))) / 2 + "px",
			contTop = document.body.scrollTop + document.documentElement.scrollTop + (document.documentElement.clientHeight - parseInt(getStyle(domCont, "height"))) / 2 + "px";
		domBg.style.cssText = "height:" + document.documentElement.scrollHeight + "px; display:block;";
		domCont.style.cssText = "left:" + contLeft + "; top:" + contTop + "; display:block;";
	}
	domClose.onclick = function() {
		domBg.style.cssText = "";
		domCont.style.cssText = "";
	}
}
</script>
</body>
</html>

Demo ：http://jsfiddle.net/84QDj/2/embedded/result/

简生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
popup弹窗(备忘)

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> new document #btn { text-align:center; margin:2px 1px; border: 1px
复制链接

扫一扫

专栏目录