遮罩层效果 兼容ie firefox jQuery遮罩层 弹出层带关闭按钮
今天写了一个jQuery遮罩层的效果，当然网上也有很多类似的效果及插件，但是大多数看上去很复杂，我只要最简单最实用的，最少的代码达到最多的效果，欢迎各位同志围观。。
<!doctype html><html lang="en"><head> <title>遮罩层效果 兼容ie firefox jQuery遮罩层</title> <meta name="keywords" content="你好好 " /> <meta name="description" content="好好好好好好好好"/> <style type="text/css"> .mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);height:1000px;} .tanchu{ width:600px;height:300px;position:absolute; top:50%;left:50%;margin:-150px 0 0 -300px; z-index:101; background:green;display:none;}.close{ color:#fff; cursor:pointer;} </style> <script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script> <!–[if ie]> <script src="http://jt.875.cn/js/html5.js" type="text/javascript"></script> <![endif]–> <script type="text/javascript"> $(function(){ $(".input").click(function(){ $(".tanchu").show()$(".mask").css({ display: "block", height: $(document).height() });//获取高度，兼容IE6。如果不考虑IE6直接可以换成show()}); $(".close").click(function(){ $(".tanchu").hide() $(".mask").hide()}); }); </script></head><body> <div class="mask"></div> <p><input class="input" type="button" style="width:100px; height:30px;" /></p><div class="tanchu"> <a class="close">点我关闭层</a> <p>我是一个弹出层我是一个弹出层我是一个弹出层我是一个弹出层啊 我是一个弹出层</p> </div></body></html>