HTML Load part of external link into colorbox

This example leverages the jQuery load function to pull in part of an external page, insert it into a hidden element in the DOM, then display it within a ColorBox lightbox.
HTML
<a href="/test.html#mydiv' class="popup-text">Try this!</a>
 
JS
$('.popup-text').click(function(e) {
	e.preventDefault();
	var url = $(this).attr('href').replace('#', ' #');
    $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="ajax-load-element" style="padding: 20px;"></div></div>');
	$('#ajax-load-element').load(url, function() {
        $.colorbox({
            href: '#ajax-load-element',
            width: 600,
            height: 400,
            inline: true,
            opacity: .7
        });
    });	
});
Posted by
Snippet Viewed 3149 times.

Share your HTML code snippets:

  • Get some recognition & link back to your site.

 

Submit | Browse

Most Recent html snippets

Most Viewed