Colorbox: show only a portion of another html page

Question

I have to open in a colorbox only one part of an external html page.

I tried in this way, but it opens the whole page in the specified part (at div with id="content"):

<a class="iframe" href=www.mypage.com #content" /> 

How can I do?

Answer 1

If the div is always in the same position you can just set the position of the iframe. This is the logo from my site.

<div id="divContainer" style="position: absolute; left: 50px; top: 90px; border: solid 2px #000;">
<div id="frameContainer" style="overflow:hidden;">
    <iframe src="http://www.refficient.com" scrolling="no" style="width: 325px; height: 125px; margin-top: -40px;">
    </iframe>
</div>
</div>​

http://jsfiddle.net/calder12/Y8bzf/

Other than that you could get the contents of the external site and parse the dom for the contents of the div but that would be a fair bit more work.

Answer 2

您可以使用jQuery来做到这一点：

    $('#result').load('http://www.mypage.com #container');

Answer 3

I've solved in this way:

$('.link-popup').on('click', function(e) {
  e.preventDefault();
  url = $(this).attr('href');
  $content = $('#popup');
  $content.load(url + " .content", function() {
    popup($content, "ajax");
  });
});

/* where popup is a custom function */

function popup(content, contentType) {
  $(content).bPopup({
    easing : 'easeOutBack', // uses jQuery easing plugin
    speed : 500,
    transition : 'slideDown',
    content : contentType, // 'ajax', 'iframe' or 'image'
  });   
}