[原创]整合greyBox和asp.net2.0，实现lightBox效果

        最终效果如图所示：

        除了弹出的链接的颜色是正常显示，原窗口的被灰色的背景所蒙盖，有点windows关机的时候的感觉。
并且，被灰色覆盖的原画面不能再进行操作，只能关闭新弹出的画面才能再次激活。

        对于这个效果的实现，翻了很多资料，基本都是说建立两个层，根据z-index来确定其层次，灰色覆盖层足够大来覆盖整个页面，最顶层的窗口用来显示需要显示的东西。这样在灰色层的覆盖下，原始的画面不能被进行操作。
基于这个道理，我们可以利用javascript和dom对象对其进行操作。

       但是，由于本人太懒，并且javascript是个二把刀，所以，我决定采用开源的东西来填补。
一般来说，实现这个效果的js代码，主要集中在基于 jQuery的产品Thickbox，GreyBox Redux，基于 prototype的Lightbox with moo.fx，xilinus，Multi-faceted LIghtbox，经过多个实验，我决定采用GreyBox这个产品。
        主要原因是，他支持网页和图片两种连接方式，并且实现的效果完全封装和参数化，并且可以有效地和asp.net结合，在保证功能的情况下，size也不大，20k，最关键的，界面非常的好看，符合web2.0的UI风格。

        首先，我上他们的官网http://orangoo.com/labs/GreyBox/ down了一个开发包。
得到如下内容：

        包里面拥有实现其效果的js脚本，也有关于这个脚本的说明、开发实例、普通开始、高级开发等文档。当然也有关于版权的说明。
        我仔细的结合examples.html查看了一下greybox文件夹中的AJS.js，AJS_fx.js，gb_scripts.js，gb_styles.css四个文件，然后再整理浏览他的文件。得到如下结论：
1。页面中GB_ROOT_DIR这个变量不能丢，它是js文件用来判断pic和js路径的变量；
2。必须在页面中导入greybox中AJS.js，AJS_fx.js，gb_scripts.js，gb_styles.css四个文件，缺一不可，特别值得注意的是gb_styles.css是用来展示执行效果样式的图片，如果没有这个文件，会使我们的画面一片空白不能产生任何效果。
3。在调用的时候，js已经自动将参数帮你设置完备了，你只需要一句简单的调用就可以了。

我看到这里，感觉很兴奋，因为如果是这样，那么实现这个功能太简单了，就像拖一个控件一样。

首先，我在.cs文件中导入这些js文件
如下：
    protected void Page_Init(object sender, EventArgs e)
    {
      
        ClientScriptManager csm = Page.ClientScript;
        csm.RegisterClientScriptInclude("2", "greybox/AJS.js");
        csm.RegisterClientScriptInclude("3", "greybox/AJS_fx.js");
        csm.RegisterClientScriptInclude("4", "greybox/gb_scripts.js");
        csm.RegisterClientScriptInclude("5", "static_files/help.js");
    }
然后在页面中添加
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

这样，就可以保证客户端的页面可以访问这四个js类库和css类。

然后，添加我们的链接：
方式1：普通的方式
<a href="http://baidu.com/" title="Baidu" rel="gb_page_center[640, 480]">Launch baidu.com</a>
其中<titile>表示新窗口的title,<rel>表示需要什么样的效果，这里需要的是弹出一个640px*480px的窗口
这样，我们就可以预览，并可以实现我们需要的效果。
方式2：高级的方式与cs代码融合
首先在cs代码中，添加如下代码，注册一个js事件委托

    protected void Page_Load(object sender, EventArgs e)
    {
        HyperLink1.Attributes.Add("onclick", "return GB_show('Google', this.href)");
    }

然后前台的代码如下：

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl ="http://www.colorstreet.cn">色彩街</asp:HyperLink>

这样，f5,我们就可以实现在页面的中央显示我们新页面的效果。

怎么样，是不是很简单？
如果你想实现更多的效果，以及实现picture的现实效果，不要着急
在examples.html里面已经帮你将所有的效果显现出来里，你只需要查看效果，然后看看代码，就可以轻松实现。