0

我正在尝试使用 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 相关的。

4

1 回答 1

0

假设这个函数处理你的响应HTTP POST

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

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

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

编辑：

另一种选择是使用 jQuery 在同一个函数中同时处理画布和花式框，.on()所以如果你有

<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。

于 2013-04-04T02:50:36.673 回答