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);
即可。