删除时实现屏幕透明效果

 

你也许看到过这效果:当你在某个页面点击"删除"时,突然整个屏幕处于透明状,我想这样做的目的,一是实现了非常酷的效果,二是让用户注意力更集中,反正这种设计理念不错,其实实现这种效果非常简单:

你在页面里加入一个隐藏的层:

<div id="disabled" style="position: absolute; top: 0; left: 0; width: 1000; height: 1000;
            z-index: 1000; background: Gray; filter: Alpha(Opacity=70); display: none">
 </div>

这里的意思大概是:z-index设为1000是为了让层的层叠顺序处于靠上的位置,背景为灰色,同时Alpha(Opacity=70)就是将其设为了70的透明度。

那什么时候让这一层显示呢？很明显当你点击“删除”按钮时要让这一层显示，在这里用js简单的控制一下就可以了：

//获取层对象

GetObj(objName)
        {
         if(getElementById)
       {return eval('getElementById("' + objName + '")');}
         else if(layers)
         { return eval("layers['" + objName +"']");}
         else
         {return eval('all.' + objName);}
        }
        //显示阴影背景层和当前操作层
        show(Con0)
        {
            GetObj(Con0).style.display="block";
            disabled.style.height=body.scrollHeight ;
            disabled.style.width=body.scrollWidth;
            disabled.style.display="block";
        }
        //隐藏阴影背景层和当前操作层
        hide(Con0)
        {
            GetObj(Con0).style.display="none";
            disabled.style.display="none";
        }

在这里，您要把删除的层的代码写在页面中，如下：

<div id="delSort" style="position: absolute; left: 300px; top: 150px; width: 400px;
            height: 90px; z-index: 1001; display: none">此类别中的所有收藏信息将会被删除，您确认删除吗？

             <asp:Button ID="Button4" class="ButtonStyle" runat="server" Text="确　定" OnClientClick="hide('delSort');"="delSort_Click" />
               <input type="button" ="关　闭" class="ButtonStyle" ="hide('delSort');" />
 </div>

点击“删除”时要把上面“delSort”这一层显示出来，就出现了那个效果：

<img="images\icon_X.gif" alt="删除" width="16" height="16" hspace="1" align="absmiddle"
="show('delSort‘)"/>

在delsort这一层中，你点确定和删除时这一层就消失了。

最后，我想说的是这种效果也不能滥用，如果一个页面中层太多了，对于维护不是很好，反而增加了难度，这种效果适合于逻辑不是很复杂的地方。

最后看看效果吧: