0

我以为我在使用带有 div 包裹的 nivo 滑块的fancybox 2 时遇到了麻烦，但是经过一些测试，我发现我在使用带有 div 的 facybox 2 时遇到了麻烦。所以我会重新组织我的问题。为了更清楚，我将在下面发布我的代码：

对于 CSS：

<style>
  #content{
    background: red;
  }
  #maximize{ width: 24px; height: 24px; }
</style>

对于 html：

<a href='#content' id="maximize"> max </a>
<div id="content"> </div>

对于 JS：

$('#maximize').click(function() {
$('#maximize').fancybox({
     'href' : '#content'
   });
});

如果我单击最大按钮，它会按预期工作。但是，如果我关闭了fancybox，弹出框就消失了，原来id=“content”的div也消失了。这不是预期的。我希望内容变成原来的样子，但不要消失。

其他问题：如何更改弹出的花式框的大小？我想让花式盒子更大。

我希望我的问题足够清楚。提前致谢。

4

1 回答 1

0

你实际上并不需要： 

$('#maximize').click(function() {
   $('#maximize').fancybox({
     'href' : '#content'
   });
});

...但只有这个：

$('#maximize').fancybox({
    // API options here
});

...因为.fancybox()已经将事件绑定click到 selector ，否则是多余的 ....选项#maximize也是如此，因为已经从链接中的属性中获取。'href' : '#content'hrefhref

另一方面，fancybox 将始终隐藏打开的inline内容，因为它将是它的预期状态（在fancybox 中显示已经可见的东西不是多余的吗？）...无论如何，您可以使用回调使其再次可见afterClose喜欢 ：

$('#maximize').fancybox({
    afterClose: function() {
        $("#content").show();
    }
});

关于第二个问题，使用width和height选项以及fitToView和autoSize设置您喜欢的盒子尺寸，例如：

$('#maximize').fancybox({
    fitToView: false, // avoid the adjusting size to viewport
    autoSize: false, // avoid set size based on content
    width: 420, // or whatever
    height: 320,
    afterClose: function() {
        $("#content").show();
    }
});​

查看工作演示

于 2012-12-11T20:37:48.363 回答