Question

我认为我使用fancybox 2时遇到了一个div包裹的nivo滑块，但经过一些测试后，我发现我在使用带有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也会消失。这不是预期的。我希望内容成为现实，但不会消失。

其他问题：如何更改弹出的花式框的大小？我想把这个花哨的盒子放大。

我希望我的问题足够明确。提前谢谢。

Answer 1

您实际上并不需要：

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

......但仅限于此：

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

...因为.fancybox()已经将click事件绑定到选择器#maximize，否则就是多余的......自'href' : '#content'选项以来href选项也是如此1}}已取自链接中的href属性。

另一方面，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();
    }
});

参见 working DEMO

fancybox 2与div

1 个答案: