Question

从Jquery加载fancybox如何在页面而不是整个页面上检索div ID的内容。这是我的代码，所以我得到了整个页面：

索引视图（这链接到样式的show视图）：

<div class="style_image"> <%=link_to (image_tag style.cover.pic.url(:normal)), style %></div>

节目视图（我想要出现在fancybox中）：

<div id="show_style">

    ALL THE CONTENT!

</div>

的application.js：

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a").fancybox();
    return false;       

});
});

我也试过以下但没有成功：

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a" + "#show_style").fancybox();
    return false;       

});
});

我不知道如何做到这一点，因为fancy box docs上的信息很少。我希望这是动态完成而不是内联。

Answer 1

我也有这个问题。

现在它已经解决了。

这是答案：

  function view(url){

     $.fancybox(
             url,
             {
                 type: 'iframe',
                 width            : '35%',
                 height            : '50%',
                 showCloseButton: true,
                 opacity: true,
                 overlayOpacity: 0,
                 transitionIn: 'none',
                 transitionOut: 'none',
                 enableEscapeButton: true
             }
     );
}




<a onclick="view('ViewFacility?rid=2');return false;" >click</a>

Answer 2

我不确定我知道你的意思，但是如果你想在点击的元素上调用fancybox（），请试试这个：

$(function() {

$(".style_image a").live('click', function(event) { 

    $('this').fancybox();
    return false;       

});
});

Answer 3

好的，根据您提供的最新信息，我相信您要做的是从show_style元素中获取所有内容并将其放入fancybox中。这是javascript。

$(function() {
    $("a#linkEle").fancybox({
        'hideOnContentClick': true
    });
});

你的html将指向show_style元素中的内容

<a id="linkEle" href="#show_style"></a>
<div style="display:none"><div id="show_style">ALL CONTENT TO BE SHOWN</div></div>

查看锚点href如何指向id为show_style的div。如果你试图从show_style里面获取所有内容并把它放在精美的盒子里面，我相信你就是这样做的。

大都市

Answer 4

根据Fancybox documentation，您希望<a>代码将#show_style作为href元素。

<div class="style_image"><a href="#show_style">Click here to show fancybox</a></div>

然后你的第一个代码应该有效：

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a").fancybox();
    return false;       

});
});

Jquery动感花式盒子

4 个答案: