popup弹窗(备忘)

来源：互联网发布：新视野网络教学平台编辑：程序博客网时间：2024/06/06 01:44
<!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/