Question

我需要在fancybox弹出窗口中显示图像和一个按钮，但我无法将其显示正确。

我用两种不同的方法尝试过它：

获取图片并将按钮附加到HTML。

$('a.zoom').fancybox({
    type: 'image',
    onComplete: function() {
       $('#fancybox-content').append('<button>Click</button>');
       $.fancybox.resize() // this won't do anything
    }
});

这样，弹出框就是图像的高度，按钮不可见。

显示HTML。

$('a.zoom').live('click', function(ev) {
    ev.preventDefault();
    var url = $(this).attr('href');
    var content = '<img src="' + url + '" />';
    var id = $(this).parent().attr('data-frame-id');

    $.fancybox({
        content: content + '<button>Click</button>',
        type: 'html',
        onComplete: function() {
            $.fancybox.resize();
        }
    });
});

这样，弹出框的高度是正确的，但宽度只是按钮宽度。

使用这两种方法，$.fancybox.resize()似乎无法执行任何操作autoScale和autoDimensions。

如何正确显示图像和按钮？

生成的HTML

<div id="fancybox-overlay" style="background-color: rgb(119, 119, 119); opacity: 0.7; cursor: pointer; height: 937px; display: block; "></div>
<div id="fancybox-wrap" style="width: 1020px; height: auto; top: 34px; left: 421px; display: block; ">
    <div id="fancybox-outer">
        <div class="fancybox-bg" id="fancybox-bg-n"></div>
        <div class="fancybox-bg" id="fancybox-bg-ne"></div>
        <div class="fancybox-bg" id="fancybox-bg-e"></div>
        <div class="fancybox-bg" id="fancybox-bg-se"></div>
        <div class="fancybox-bg" id="fancybox-bg-s"></div>
        <div class="fancybox-bg" id="fancybox-bg-sw"></div>
        <div class="fancybox-bg" id="fancybox-bg-w"></div>
        <div class="fancybox-bg" id="fancybox-bg-nw"></div>
        <div id="fancybox-content" style="border-width: 10px; width: 1000px; height: 809px; ">
            <img id="fancybox-img" src="http://localhost/img.php?id=24" alt="">
            <button id="usethis">Use this frame</button>
        </div>
        <a id="fancybox-close" style="display: inline; "></a>
        <div id="fancybox-title" style="display: none; "></div>
        <a href="javascript:;" id="fancybox-left">
            <span class="fancy-ico" id="fancybox-left-ico"></span>
        </a>
        <a href="javascript:;" id="fancybox-right">
            <span class="fancy-ico" id="fancybox-right-ico"></span>
        </a>
    </div>
</div>

Answer 1

按钮应放在<div id="fancybox-title">内，因为<div id="fancybox-content">的目的仅适用于图像

Fancybox调整大小不起作用

1 个答案: