网页制作教程:弹出层详解

作者佚名技术来源 CSS技术浏览发布时间 2012-02-27

三、弹出层—到浏览器中央—背景变暗

用到的javascript代码如下：

function show(){
	var iWidth = document.documentElement.clientWidth;
	var iHeight = document.documentElement.clientHeight;
 
	var bgObj = document.createElement("div");	//创建背景层
	bgObj.setAttribute("id","bgbox");
	bgObj.style.width = iWidth+"px";
	bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";
	document.body.appendChild(bgObj);		//将创建的层插入body中
 
	var oShow = document.getElementById(''show'');
		oShow.style.display = ''block'';
		oShow.style.left = (iWidth-302)/2+"px";
		oShow.style.top = (iHeight-202)/2+"px";
 
	var oClosebtn = document.createElement("span");
		oClosebtn.innerHTML = "×";
		oShow.appendChild(oClosebtn);
 
	function oClose(){
		oShow.style.display = ''none'';
		oShow.removeChild(oClosebtn);
		document.body.removeChild(bgObj);		
	}
 
	oClosebtn.onclick = oClose;
	bgObj.onclick = oClose;
}

点击下面“运行”直接查看效果

<!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" /> <meta name="description" content="前端思考" /> <meta name="keywords" content="前端思考" /> <title>弹出层—到浏览器中央—背景变暗：前端思考</title> <style> *{margin:0;padding:0px;} body{padding:30px;} #show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;} #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;} #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;} #show p{padding:5px;} #text{font-size:12px;text-indent:2em;line-height:20px;} #bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10} </style> <script type="text/javascript"> function show(){ var iWidth = document.documentElement.clientWidth; var iHeight = document.documentElement.clientHeight; var bgObj = document.createElement("div"); bgObj.setAttribute("id","bgbox"); bgObj.style.width = iWidth+"px"; bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px"; document.body.appendChild(bgObj); var oShow = document.getElementById(''show''); oShow.style.display = ''block''; oShow.style.left = (iWidth-302)/2+"px"; oShow.style.top = (iHeight-202)/2+"px"; function oClose(){ oShow.style.display = ''none''; document.body.removeChild(bgObj); } var oClosebtn = document.createElement("span"); oClosebtn.innerHTML = "×"; oShow.appendChild(oClosebtn); oClosebtn.onclick = oClose; bgObj.onclick = oClose; } </script> </head> <body> <a onclick="show(); return false" href="#">请猛击我（我会弹到中间，同时背景变暗）</a> <div id="show"> <h3>弹出层标题栏</h3> <p id="text"> 这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。 </p> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 应聘网页设计师常见的8个面试试题和答案下一篇: CSS教程:容易忽略的但是很熟悉的CSS属性

关于网页制作教程:弹出层详解的所有评论

随机推荐