Как загрузить страницу в динамически генерируемый iFrame, когда ссылка нажимается как лайтбокс в jQuery? - PullRequest
Новая
       16

Как загрузить страницу в динамически генерируемый iFrame, когда ссылка нажимается как лайтбокс в jQuery?

3 голосов
/ 09 июня 2010

У меня есть список ссылок, например: 

<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>

При нажатии на ссылку в середине экрана должен быть создан iFrame, загружающий страницу как лайтбокс.

Как это сделать с помощью jQuery?

Ответы [ 2 ]

1 голос
/ 09 июня 2010 
$(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();
});
});​

Я плохо рассчитал верхнюю / левую координаты там, вы все равно можете заменить их классом css. Используйте class: "classname" для этого при создании.

Ссылки: .bind () ,. attr () , .appendTo () , jQuery Core

0 голосов
/ 09 июня 2010

Вы можете сделать что-то вроде этого: 

// 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

...