Question

我正在尝试使用fancybox v2来显示其内容是动态生成的div。我在事物计划中设定了div的大小。我已经尝试过fancybox文档中的示例来显示大小固定的div。它看起来像这样：

<a id="fancy" href="#showdiv">Show contents of div.</a>
<div id="showdiv">...</div>

<script>
$(document).ready(function() {
    $("#fancy").fancybox({autoSize:false, width: W, height: H, ...});
});
</script>

我想要的是W=$("#showdiv").width和H=$("#showdiv").height。很明显，H和W在文件准备就绪时无法使用。我该怎么做呢？

编辑：这是内容div的html：

<div id="hidediv" style="display:none">
    <div id="showdiv" style="display:block;position:relative">
        <canvas id="mycanvas" style="position:relative;display:block"></canvas>
    </div>
</div>

在锚点“#fancy”的点击处理程序中，我执行：

function onclick() {
    var jcanvas = $("#mycanvas").css('width', some_width).css('height', some_height);
    // draw on canvas
}

“#fancy”是与Fancybox相关联的。

Answer 1

假设此功能处理HTTP POST

的响应

function onclick() {
    // set size of canvas
    var jcanvas = $("#mycanvas").css({
        "width": some_width, // variable from response ?
        "height": some_height
    });
    // draw on canvas
}

...然后使用fancybox afterLoad回调调用该函数，如

$("#fancy").fancybox({
    fitToView: false, // the box won't be scaled to fit the view port (optional)
    afterLoad: onclick()
});

编辑：

另一种选择是使用jQuery .on()同时处理同一函数中的canvas和fancybox，所以如果你有

<a id="fancy" href="#showdiv">Show contents of div</a>

使用此脚本：

$("#fancy").on("click", function () {
    // do HTTP POST
    // on success, get size form response
    var some_width = 300,
        some_height = 180;
    // set canvas size
    var jcanvas = $("#mycanvas").css({
        // variables from response
        "width": some_width, 
        "height": some_height
    });
    // draw on canvas
    //
    // then open fancybox ($(this) = #showdiv )
    $.fancybox($(this),{
        // API options etc
        fitToView: false
    });
});

在这种情况下，您不需要任何回调。

注意：.on()需要jQuery v1.7 +

有关文档说明，请参阅 JSFIDDLE 。

动态设置Fancybox2的宽度/高度

1 个答案: