Comment charger iframe sur le dessus du contenu dans une fenêtre collante soignée avec jquery

Question

Im intégrant une simple application chatbox dans mon site, qui est simplement ajouté par iframeing chat.php

Je n'ai pas un endroit statique pour mettre ce sur la page web, et je veux charger l'iframe en plus du contenu du site en haut à droite (avec ajax), qui resterait visible à moins que IX ne soit en haut.

Le fait de déclencher automatiquement le chatbox pour charger entre les chargements de page une fois qu'il est activé (en vérifiant la session qu'il a écrite lorsque la conversation a été activée pour la première fois) serait également agréable. J'utilise le framework jquery, mais je ne suis pas très compétent en la matière. Le site est écrit en PHP.

Ce que je pensais est-ce

J'ai un div id vide avec chatbox. Quand quelqu'un clique sur un lien pour voir la chatbox, il charge chat.php à l'intérieur de ce div dans un iframe, et ajoute une classe à la div qui placerait la div dans le coin supérieur droit.

Answer 1

<style type="text/css"> 
#chatFrame { 
    display: none; 
    width: 300px; 
    height: 200px; 
    /* some more styles */ 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $('#activator').click(function() { 

     $('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show(); 
    }); 
}); 
</script> 

<a href="javascript:void(0);" id="activator">open chat</a> 
<div id="chatFrame"></div> 

Answer 2

Une solution simple et très soignée: utilisez le plugin PrettyPhoto (ou tout autre style lightbox).

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

J'aime prettyPhoto pour son look simple et jusqu'à présent j'eu aucun problème avec elle.

Le code peut être aussi simple que cela:

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a> 

Le site a tous les détails.