前言：

这是在上周的工作中的一些小心得，平时用到的地方也很多，希望可以给大家一些启发和帮助。

1、 DIV弹出层遮盖

解析：

这是一个比较常见问题，有很多的网站的注册、或者登录都是用这种弹出遮盖层的方式来解决的。以前也有研究过这个东西，在网上也有各种各样的源码、JS脚本之类的东西，但总是觉得太麻烦，因为本身这个东西就只是一个谈层遮盖而已，我觉得不应该要写那么多的代码，昨天加班忙了一天，也遇到了这个问题，然后就有了一个比较好的解决方法，这里和大家分享一下，希望能对大家有所帮助。

页面布局：

<div>

    <ul>

    <li>矜持</li>

    <li>

    <ul>

    <li>我从来不曾抗拒你的魅力</li>

    <li>虽然你从来不曾对我著迷</li>

    <li>我总是微笑的看著你</li>

    <li>我的情意总是轻易就洋溢眼底</li>

    <li>我曾经想过在寂寞的夜里</li>

    <li>你终於在意在我的房间里</li>

  </ul>

    </li>

    </ul>

    <a href="#" onclick="javascript:document.getElementById('zhegaiceng').style.display='block';document.getElementById('show')
.style.display='block';">点击遮盖</a>

    </div>

    <div id="show">

    <ul>

    <li>我曾经想过在寂寞的夜里</li>

    <li>你终於在意在我的房间里</li>

    <li>你闭上眼睛亲吻了我</li>

    <li>不说一句紧紧抱我在你怀里</li>

   </ul>

    <a href="javascript:void(0)" onclick="javascript:document.getElementById('zhegaiceng').style.display='none';document.getElementById('show')
.style.display='none';">关闭遮盖</a>

    </div>

   <div class="shadow" id="zhegaiceng">

   </div>

样式：

<style type="text/css">

.shadow{position:absolute;left:0;top:0;  z-index:10; width:100%; height:100%;filter:alpha(opacity=80); display:none; background:blue; }

    #show{ position:absolute; top:10px;left:400px;width:200px; height:400px;display:none; z-index:11; }

    </style>

说明：

1) .shadow样式主要用来修饰遮盖的(id为”zhegaiceng”)层,这里需要注意的几个属性是：

position，需要将其设为absolute，为绝对定位，

z-index属性，该值主要用来显示层的显示层次，值越大，越显示在最上边

宽和高：设置为100%，用来将整个屏幕遮盖，

Top/left：设置弹出遮盖层的位置，一般将其设为0，0

Filter:alpha(opacity=80)该属性用来将弹出层的背景色设置为半透明状，即在遮罩的同时还可以看到遮盖层下的内容

display：默认都是none，不显示，当用户进行一些点击操作，比如登录时,才弹出层显示

示例效果：

点击之前：

点击之后：

2) #show样式主要用来修饰显示在弹出层之上的内容，这里显示的是一个div，该样式也有几个属性需要设置：

Position：也需将设为绝对定位

z-index：在为该属性设值时，一定要注意值一定要比弹出层样式(.shadow)的z-index值大，只有这样它才能显示出来，且可供用户操作，否则将被遮盖或无法显示

top/left：设置要显示的层的位置，一般都居中设置

display：默认都是none，不显示，当用户进行一些点击操作，比如登录时：才谈层显示

2、Div背景色、透明、渐变

解析：

在上一个问题中，我们在样式了用到了filter属性，以此来实现遮罩透明的效果

这里额外的讲一下filter属性，从字面意思看，就是一个过滤，可以通过alpha提供的一些参数的组合实现div背景色的透明渐变。

filter:alpha(opactiy=10,enabled=true,style=2,finishOpacity=80, startX=20 , startY=20 , finishX=400 , finishY=400 );

如上的filter示例，我会一一将其代表的含义跟大家讲解清楚：

Opacity=10；用来表示透明渐变的透明度，取值范围：0-100，值越大，透明度越低，值为100时，完全不透明

Enabled=true；设置滤镜是否激活，true为激活

Style=1；指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形

FinishOpacity=80；用来设置结束时的透明度，达到一种渐变效果，取值范围也是0-100。

StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。

这里就不再做具体的演示了，希望有兴趣的朋友可以