FancyBox 窃取内容并且不放回去？

Question

我在从隐藏 div 加载内容的链接上触发了 fancybox。

如果我关闭fancybox并再次点击链接，它会第二次加载空白

这是我的代码：

$.fancybox({
    content: $target
});

有什么想法吗？

Answer 1

我为其他人的灯箱、与您类似的问题以及其他不显示内容等问题而烦恼。

这个快速的代码创建与fancybox插件相同（基本上），这是我一直使用的，它的跨浏览器兼容并且当你的内容不适合或出现问题时易于调试和更改或任何东西。

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('a.clickme').click(function(){

            // this creates an overlay
            var theOverlay = $('<table class="overlayTable"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>')
                .click(function(){ $(document).unbind('keyup'); $(this).remove(); });

        // this creates the white "inner" box
            $('<div></div>')
                .attr('id','insideContent')
                .css({
                    'display':'inline-block',
                    'background':'#fff',
                    'padding':'20px'
                })
                .append('<p>Some content here... you can load anything you want - or copy it from another div if you want...</p>')
                .appendTo($('body'))
                .wrap(theOverlay)
                .click(function(e){ e.stopPropagation(); });

            $(document).bind('keyup', function(e){
            // this binds the esc key to close the overlay
                if(e.keyCode==27) { $(document).unbind('keyup'); $('table.overlayTable').remove(); }
            });
        });
    });
</script>

<style>
.overlayTable {
    background: url("url/to/transparent/png/for/overlay/background.png") repeat scroll 0 0 transparent;

    border-collapse: collapse;
    border-spacing: 0;

    height: 100%; width: 100%; z-index: 999;
    left: 0; position: fixed; top: 0;

}
</style>

随意将其制作成插件或类似的东西。由于您只是在 div 中填充内容，因此您可以在其中放置任何 HTML 或任何您想要的内容。

您还可以添加自己的触摸，例如关闭按钮（只需致电$('table.overlayTable').remove();）。