GreyBox 的使用（二）-- 进阶使用（完）

时间：2010-08-23 来源：Robin_TYUT

看本篇之前，请先阅读《GreyBox 的使用（一）-- 基本使用》。

通过基本使用，我们可以看到官网的示例都是在点击一个超链接后弹出模态对话框。

等等。

但对于实际开发，我们有时需要实现通过点击 Button 来弹出一个模态对话框。其实，稍作修改就可以实现了，由于前篇文章已经对使用做了说明，这次就直接上代码了：

(1) 实现按钮点击弹出模态对话框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
    
    <!-- GreyBox引用开始 -->
    <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";    //注意这里的路径！！！
    </script>
    <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" />
    <!-- GreyBox引用结束 -->

    <script type="text/javascript">

        //居中弹出模态窗口
        function openWinCenter() {
            //GB_showCenter(caption, url, /* optional */ height, width, callback_fn)
            GB_showCenter("百度一下", "http://www.baidu.com", 600, 900);    
        }
        
        //全屏弹出模态窗口
        function openWinFull() {
            //GB_showFullScreen(caption, url, callback_fn)
            GB_showFullScreen("百度一下", "http://www.baidu.com");    
        }

    </script>
    
  </head>
  
  <body>
      <input type="button" value="居中弹出" onclick="openWinCenter()"><br/>
      <input type="button" value="全屏弹出" onclick="openWinFull()"><br/>
  </body>
</html>

具体用法可以看官方文档的“Advance Usage”部分。

(2) 开发过程中还会遇到这样的问题，在弹出窗口进行操作后，关闭时需要对父窗口进行刷新。怎么实现？

　　我们先看一下普通的 js 是怎么写的

<script language="javascript">
　　
    //弹出窗口
    function openSubWin() {
        window.open("","name1","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100");
    }

    //关闭子窗口，刷新父窗口
    function closeSubWin() {
        window.opener.location = "http://www.baidu.com";
        window.close();
    }

</script>

那如果使用 GreyBox 怎么实现呢？上代码，【注意】这个 js 是在子窗口的网页中写的：

<script type="text/javascript">
        
        function close() {
            parent.parent.location.reload();
            parent.parent.GB_hide();
        }

 </script>

　　好了，至此就完成了对于 GreyBox 的学习，这些基本就可以满足我们日常的项目需要了。

《GreyBox 的使用》-- （完）