12

如何让 Fancy box 以页面上的特定 DIV ID 为目标，而不是在 fancybox 中请求整个页面。？这是我的代码

$(function() {

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

    $(".style_image a").find("#show_style").fancybox();       

});
});

这不行吗？

我最初尝试了以下方法：

 $(function() {

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

        $(this.href + " #show_style").fancybox();       

    });
    });

不确定这是如何完成的，或者是否有可能？

这是文档

4

2 回答 2

24

如果您希望 fancybox 打开某个 div，您只需使用以下简单步骤：

首先，您需要一个链接来将 FancyBox 连接到： 

<a href="#myDivID" id="fancyBoxLink">Click me to show this awesome div</a>

注意锚点旁边的div id 。

其次，您需要一个将显示在 FancyBox 中的 div：

<!-- Wrap it inside a hidden div so it won't show on load -->
<div style="display:none">
    <div id="myDivID">
         <span>Hey this is what is shown inside fancybox.</span>
         <span>Apparently I can show all kinds of stuff here!</span>
         <img src="../images/unicorn.png" alt="" />
         <input type="text" value="Add some text here" />
    </div>
</div>

第三个非常简单的 javascript 将它们连接在一起

<script type="text/javascript">
    $("a#fancyBoxLink").fancybox({
        'href'   : '#myDivID',
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
</script>
于 2010-09-29T06:48:54.453 回答
7

你只需要这个选择器：

$("#show_style").fancybox();

ID 选择器（因为 ID 应该是唯一的）只是#IDGoesHere

我认为您所追求的是将内容加载到某个花哨的框中，如果您想<div id="content"></div>从 href 指向的页面加载说，您可以使用.load()：

$(".style_image a").on('click', function(event) { 
  $('#show_style').load(this.href + " #content").fancybox();       
});

.load()有一个选项url selector只加载目标页面的一部分。

于 2010-04-10T10:30:35.893 回答