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

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

二、弹出层—到浏览器中央

用到的javascript代码如下：

function show(){
	var iWidth = document.documentElement.clientWidth;	//获取浏览器宽度
	var iHeight = document.documentElement.clientHeight;	//获取浏览器高度
 
	var oShow = document.getElementById(''show'');
		oShow.style.display = ''block'';
        oShow.style.left = (iWidth-302)/2+"px";	//居中横坐标
		oShow.style.top = (iHeight-202)/2+"px";	//居中纵坐标
	var oClose = document.createElement("span");
		oClose.innerHTML = "×";
		oShow.appendChild(oClose);
		oClose.onclick = function(){
			oShow.style.display = ''none'';
			oShow.removeChild(this);
		}
}

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

<!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;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;} </style> <script type="text/javascript"> function show(){ var iWidth = document.documentElement.clientWidth; var iHeight = document.documentElement.clientHeight; var oShow = document.getElementById(''show''); oShow.style.display = ''block''; oShow.style.left = (iWidth-302)/2+"px"; oShow.style.top = (iHeight-202)/2+"px"; var oClose = document.createElement("span"); oClose.innerHTML = "×"; oShow.appendChild(oClose); oClose.onclick = function(){ oShow.style.display = ''none''; oShow.removeChild(this); } } </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属性

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

随机推荐