fancybox 用法记录

前台代码：

在ASPX头部加入下列语句：

<script src = "../js/jquery-1.4.2.min.js" type = "text/javascript" ></script >
<script src = "../js/jquery.mousewheel-3.0.4.pack.js" type = "text/javascript" ></script >
<script src = "../js/jquery.fancybox-1.3.4.js" type = "text/javascript" ></script >

接着写入下列script语句：

<script type = "text/javascript" >
$ (document ) . ready (function ( )
{  
    $ ( 'a.newBtn' ) . each (function (index )
     {
        $ ( this ) . fancybox ( {
             'width'  :  '95%',
             'height'  :  '95%',
             'type'  :  'iframe',
             'hideOnOverlayClick'  :  false,
             'onCleanup'  : function ( )  {  return confirm ( 'Are you sure to close this dialog?All data will be lost if not save.' ) ; },
             'onClosed'  : function ( )  { window . location . href  =  'index.aspx' ; }
         } ) ;
     } ) ;
} ) ;
</script >

a.newBtn对应控件如下：

<a  class = "newBtn" href = "edit.aspx" >Add  New </a >

这里的edit.aspx中可以加入参数。如edit.aspx?id=1等。

这样点击Add New后，edit.aspx页面就会弹出来了。

如何在弹出来的fancybox页面上点击Close按钮关闭它？

parent.$.fancybox.close();

http://stackoverflow.com/questions/1829319/close-fancy-box-from-function-from-within-open-fancybox

如何在弹出来的fancybox页面上点击Close按钮刷新父页面？
window.parent.document.execCommand('Refresh');
如何在当前页面设置关闭fancybox页面后刷新此页面？

1. $('a#editCatalog').fancybox({
2.                 'width': '80%',
3.                 'height': '80%',
4.                 'type': 'iframe',
5.                 'hideOnOverlayClick': false,
6.                 'onClosed': function() {
7.                     window.document.execCommand('Refresh');
8.                 }
9.             });

将refresh这句话写在“onClosed”的好处就是在弹出页面中，无论点击“Close”按钮，还是点击右上角的“Close”图标关闭弹出页面，都会运行到onClosed这里。
经试验，发现在IE下没问题，在FF下就不行。修改代码为：
window.document.location.reload(true);
即可。