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

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

在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动……

网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。

其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）

一、最简单的弹出

用到的javascript代码如下：

function show(){
	var oShow = document.getElementById(''show'');
	oShow.style.display = ''block'';
	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:relative;border:1px solid #4c77aa;background:#f2f7fd;margin-left:70px;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 oShow = document.getElementById(''show''); oShow.style.display = ''block''; 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 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 5 6 下一页

分享到：更多

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

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

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

随机推荐