All geek questions in one place

How to load a page in a dynamically generated iFrame when clicking a link as a lightbox in jQuery?

I have a list of links, for example:

<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 the link is clicked, an iFrame should be generated in the middle of the screen, loading the page like a lightbox.

How to do it using jQuery?

+3
source share
2 answers
$(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 have poorly calculated the top / left coordinates there, you might want to replace this with the css class. Use class: "classname"for this in creation.

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

+1
source

- :

// we only want to use a single iframe:
var $iframe = $("<iframe>").css({
  width: '100%', 
  height: '10em'
  // we can set more css properties to make it positioned where we want, etc...
});
$("a").click(function() {
   // stick it at the end of the <body> tag, and set its src property
   $iframe.appendTo('body').attr('src',this.href);
   return false;
});

, -, , , a, , - .myLinks a class='mylinks' <ul>, , , <iframe> / css.

jsfiddle

0

Source: https://habr.com/ru/post/1749177/

More articles:


All Articles