遮盖层其实就是一个div。跟浏览器一样大。然后盖在上面。使用户不能操作页面。都是显示遮盖效果的同时弹出一个小窗口，提示或者操作数据用
var width = $(window).width(); //获取宽度 var height = $(document).height(); //获取高度 var div = $("<div class='mycover'></div>"); $("body").append(div); //添加 //设置样式 div.css({ "left": "0px", "top": "0px", "width": width, "height": height, "display": "block" });
div的类样式 mycover
.mycover { position: absolute; background-color: Gray; opacity: 0.5; filter: alpha(opacity=50); display: none; }
这样就是一个简单的遮盖层效果。但。改变浏览器大小时候。遮盖层不会跟着改变。所有你得自己写事件（resize事件）。
现在我们模拟一个完整的代码：比如页面有个按钮。我们点击按钮的时候。让页面弹出模态窗口(其实就是显示遮盖层的同时。在页面显示一个窗口。一般是页面中间显示)
html源码
<!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> <title></title> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $(".coverholder").showCover(); }) $("#btn1").click(function () { $(".coverholder").closeCover(); }); }) </script> </head> <body> <input id="btn" type="button" value="click" /> <%--弹出的窗口--%> <div class="coverholder"> <input type="text" /> //窗口中的text <input type="button" id="btn1" value="cancel" /> //窗口中的按钮 </div> </body> </html>
样式
.mycover { position:absolute; background-color:Gray; opacity:0.5; filter:alpha(opacity=50); display:none; } .coverholder { position:fixed; 300px; height:200px; background-color:Red; z-index:1000; display:none; }
js部分
/*$.fn.extend 只是在扩展jquery对象的方法，只是让这个方法可以通过$("#ddd").XX();可以用，并且在里面可以用jquery对象。 */ $.fn.extend({ //这是一个扩展方法。扩展方法， showCover: function () { var width = $(window).width(); //获取宽度 var height = $(document).height(); //获取高度 var div = $("<div class='mycover'></div>"); //拼div $("body").append(div); //添加div //设置div的样式 div.css({ "left": "0px", "top": "0px", "width": width, "height": height, "display": "block" }); /*模态窗口 即在遮盖层效果下。页面弹出一窗口 窗口出现在页面的中间*/ var $coverholder = $(this); var x = (width - $coverholder.width()) / 2; //计算出窗口的位置。同下 var y = ($(window).height() - $coverholder.height()) / 2 ; $(this).css({ "display": "block", "left": x, "top": y }); //resize事件 即浏览器大小。遮盖层大小和窗口位置跟着变化 $(window).resize(function () { $coverholder.closeCover(); $coverholder.showCover(); }) }, //关闭窗口事件 closeCover: function () { $(window).unbind("resize"); //注销resize事件 $(this).css("display", "none");//隐藏窗口 var div = $(".mycover"); if (div.length > 0) { //如果div存在。则移除 用于遮盖层效果的div div.remove(); } } })
但弹出的窗口并不能移动。这些仅仅是让我们了解模态窗口是怎么实现的。只有懂得了原理。做什么都不是问题。现在有很多框架已经帮我们
实现了模态窗口的效果。比如easyui，jqueryUI。等等，可以去了解。