使用JQuery实现简单的半透明遮盖层 + 弹出框居中 Demo
在平时做小项目的时候经常会用到弹出层，虽然不难，可是前端毕竟还不是很熟的，所以每次都要“Search + 调试”好久才可以用，比较耽误时间。使用一些框架的学习成本略高，对于小项目来说不太成比例，长时间不用又忘了，而且由于是框架考虑的因素较多，也并不都适合自己。
还是喜欢自己实现一个挫挫的练练手，留着以后备用^_^。至于框架，有时间再学习整理啦。此处留一个今天刚实现的：
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的半透明遮盖层 + 弹出框居中 Demo</title> <style type="text/css"> /* 弹出层 */ .pop-box { z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/ border:2px solid #C4E3FF; margin:0; display: none; position:fixed; background-color:#E1F1FF; } .pop-box header { padding:12px 0 0 12px; margin:0; height:25px; } .pop-box h3 { color:#555; font-size:13px; margin:0; } .pop-box-body { clear: both; padding:0 13px 13px 13px; margin: 0; font-size:13px; } .mask { width:100%; height:100%; position:fixed; top:0; left:0; background-color:#666; filter: Alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8; z-index: 9998; /*这个数值比pop box小*/ } </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script language=javascript type="text/javascript"> function popupDiv(div_id) { var div_obj = $("#" + div_id); var posLeft = ($(window).width() - div_obj.width()) / 2; var posTop = ($(window).height() - div_obj.height()) / 2; //添加并显示遮罩层 $("<div id='mask'></div>").addClass("mask") .appendTo("body") .fadeIn(200); div_obj.css({"top": posTop , "left": posLeft}).fadeIn(); } function hideDiv(div_id) { $("#mask").remove(); $("#" + div_id).fadeOut(); } </script> </head> <body> <form id="pop-form"> <div id='pop-div' style="width: 400px;" class="pop-box"> <header> <h3>标题位置</h3> </header> <div class="pop-box-body"> <p> 正文内容 </p> <input type="button" value="关闭" onclick="hideDiv('pop-div');" style="float:right"/> </div> </div> <input type="button" id="btnTest" value="弹出" onclick="popupDiv('pop-div');"/> </form> </body> </html>
最终效果，初始：
点击按钮：
