How to Load a page in a dynamically generated iFrame when a link is clicked like a lightbox in jQuery?

Question

I have a list of links eg :

<ul> 
<li><a href="http://google.com">Link1</a></li>
<li><a href="http://example.com">Link2</a></li>
<li><a href="http://example.com/sdf">Link3</a></li>
</ul>

When a link is clicked, a iFrame should be generated in the middle of the screen loading the page like a lightbox.

How to do this with jQuery ?

Answer 1

$(document).ready(function(){
 $('a').bind('click', function(e){
    $('<iframe/>', {
       src:   $(this).attr('href'),
       class: 'myiframe',
       css:   {
           position: 'absolute',
           width:    '200px',
           height:   '200px',
           top:      window.innerHeight / 2 + 300,
           left:     window.innerWidth / 2 + 300
       }          
    }).appendTo(document.body);

    return(false);
});

$(document.body).bind('keydown', function(e){
  if(e.which === 27)
     $('.myiframe').remove();
});
});​

I poorly calculated the top/left coordinates there, you might want to replace that with a css class anyway. Use class: "classname" for that within creation.

References: .bind(), .attr(), .appendTo(), jQuery Core