0

如何使用带有 iframe 的 Fancybox v2.0 从另一个页面打开特定的 div #id？

我试过这个，但什么也没发生。

这是索引html：

<!DOCTYPE html>
<html>
<head>
<!-- Add jQuery library -->
<script src="lib/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8">    </script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.0.6" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {

        $(".click").fancybox({
    type: 'ajax',
    'ajax': {
    dataFilter: function(data) {
    return $(data).find('#play')[0];
                           }
        }
    });
    });
</script>
  </head>
  <body>
  <a class="click fancybox.iframe" href="iframe.html">Iframe</a>
  </body>
  </html>

这是 iframe.html

  <div id="play">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
4

1 回答 1

0

您可以使用以下代码实现相同的目的

$("#click").click(function(e){
    e.preventDefault();
    $.get($(this).attr('href'),function(data){
         var content = $(data).filter('#play').html();  
         $.fancybox({
        'padding'   : 20,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'content'   : content
        }); 
    });

});

它所做的是首先获取内容，iframe.html然后仅查找#playdiv 内容并使用 fancybox 显示它。

这是一个工作演示

如果您想检查原始内容，这里是原始iframe.html 。

于 2012-05-30T19:20:07.660 回答