简易全屏透明遮罩(lightBox).docVIP

前不久有个正要毕业的网友给我发邮件，他毕业设计需要实现锁屏的效果，但是他没有能看懂我之前发布的对话框源码，他问能不能把锁屏相关代码说明下，我当时说过两天就发。由于最近比较忙，我现在才想起来，但愿现在此文还来得及。 步入正题： 现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone， wordpress后台。这种方式本来无可非议，但是在页面很长的时候在IE8下会失效（国外资料的解释是与机器显卡相关），有些完美情节的同学遇到这个问题后就抓破了头，无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法，咱们用CSS去解决它！ 还记得“position:fixed”吗？它是css2的一个新增的属性，他可以让一个元素静止在页面上，拖动滚动条也不会动，如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口，这样就可以实现全屏遮罩了，不用再计算页面的大小，调整浏览器大小的时候也不要去动态修改尺寸了。 以下为引用的内容： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/199