jquery插件——页面弹出层(GreyBox)

来源：互联网发布：淘宝助理无法下载订单编辑：程序博客网时间：2024/06/09 20:24

一、基础安装
1.在<head></head>标签中加入如下代码：
<script type="text/javascript">
var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>
"GB_ROOT_DIR"变量是用来加载弹出层的静态文件，当然你也可以将对应的目录下载下来放在工程目录中，这里用相对路径即可，比如：
<script type="text/javascript">
var GB_ROOT_DIR = "js/jquery/greybox/";
</script>

2.附加上需要用到的js文件和css样式表文件
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
注意：官方有这样一句"AJS_fx.js is optional, it's used for effects. If you don't wish effects, then don't include AJS_fx.js in your header section. "，中文意思是"AJS_fx.js文件是

可选的，它是用来做特效的，如果你需要使用特效，可以不用附加此文件。"这里个人在用的时候加上了，至于官方说的特效还没使用过。有知道的朋友可以帮忙添加一下说明。

通过以上两步便可以再程序中使用greybox插件了。

二、实战使用
概述：我在项目中使用时用到了iframe,这样的话，如果要达到全屏的效果，必须将以上的两步加载文件加到你的父级页面上，然后在iframe中的某个页面通过访问父级页面的方式访问greybox提供的方

法。我是在父级页面定义了一个js的方法，代码如下：
<script type="text/javascript">
        function showChangePage()
        {
            return GB_show('WinCRM——客户资源变更', 'Customer_Change_Edit.aspx')
        }
</script>
GB_show(args1,args2)方法是greybox插件提供的，第一个参数是页面的名称，第二个参数是页面url。我这里使用的比较简单，在官方还有更多的方法供大家使用，有兴趣大家可以去看看，并帮忙贴出

来大家学习，官网地址：http://orangoo.com/labs/greybox/installation.html。
这样在我iframe页面中其中的一个页面调用的时候是这样的，代码如下：
<asp:Button ID="btnFrame" runat="server" Text="打开资源查看模式" OnClientClick="parent.showFramePage();"/>
如果需要在弹出的页面使用按钮自己实现关闭的的话可以使用插件提供的GB_hide()方法，当然我这里使用了iframe，所以在使用的时候需要调用父级的这个方法，代码：parent.parent.GB_hide(); 如

果你还想在关闭后刷新父级页面那直接加上parent.location.reload(); 即可。

三、小结
整体来说jquery这个greybox是比较好用的，但是在使用中有个问题一直不能解决：在弹出的页面中，在其右上角有个"close"关闭连接，想要去改成中文，一直在其文件中找没找到，希望大家在使用中

解决了告诉一下本人。