Question

如何使用带有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>

Answer 1

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

$("#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的内容，然后仅查找#play div内容并使用fancybox显示它。

这是working Demo

如果您想检查内容，请使用原始iframe.html。

在iframe中打开特定div #id

1 个答案: