Comment charger une page dans un iFrame généré dynamiquement quand un lien est cliqué comme une lightbox dans jQuery?

J'ai une liste de liens, par exemple:Comment charger une page dans un iFrame généré dynamiquement quand un lien est cliqué comme une lightbox dans jQuery?

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

Lorsqu'un lien est cliqué, un iFrame doit être générée au milieu de l'écran chargement de la page comme une visionneuse.

Comment faire cela avec jQuery?

Source

2010-06-09 Aakash Chakravarthy

$(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 mal calculé les coordonnées haut/gauche là-bas, vous pouvez le remplacer par une classe de toute façon css. Utilisez class: "classname" pour cela dans la création.

Références: .bind(),. attr(), .appendTo(), jQuery Core

Source

2010-06-09 10:13:24 jAndy

Vous pouvez faire quelque chose comme ceci:

// 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; 
});

Bien sûr, pour autre chose qu'une démo, vous aurez besoin d'un sélecteur plus spécifique que a qui trouvera tous les liens, quelque chose comme .myLinks a et ajouter à class='mylinks' le <ul> est probablement la meilleure option. Vous avez également plus d'options pour styliser le en utilisant les propriétés css/classes.

Demo on jsfiddle

Source

2010-06-09 10:13:20 gnarf

Hey merci, jsfiddle est vraiment bon. Merci pour votre code et l'introduction de jsfiddle –

@Aakash Chakravarthy - Pas de problème - aussi, vous pouvez marquer une réponse comme "accepté" en cliquant sur la case à cocher ci-dessous le score des messages. – gnarf

Comment charger une page dans un iFrame généré dynamiquement quand un lien est cliqué comme une lightbox dans jQuery?

Répondre

Questions connexes