2012-05-30 2 views
0

Как открыть специфицированный div #id с другой страницы с помощью Fancybox v2.0 с iframe?Открыть конкретный div #id в iframe

Я пробовал это, но ничего не случилось.

Это индекс 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> 

ответ

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, а затем находить только #play divs и показывать его с помощью fancybox.

Вот working Demo

Вот оригинал iframe.html, если вы хотите, чтобы проверить Orignal содержание.

+0

Отличный! Спасибо, теперь он работает, благодаря вам! – user1426770

Смежные вопросы