0

Fancybox v2.0でiframeを使用して別のページから特定の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
        }); 
    });

});

それがしていることは、最初にコンテンツを取得してから、 div コンテンツiframe.htmlのみを見つけ#playて、fancybox を使用して表示することです。

ここに動作するデモがあります

元の内容を確認したい場合は、ここに元のiframe.htmlがあります。

于 2012-05-30T19:20:07.660 に答える