11495 sujets

JavaScript, DOM et API Web HTML5

Ouvrir une fenêtre popup à partir d'une div

coucou !

bon j'ai bien fouiné tout ce que j'ai pu, pensant mon idée assez simple, je n'ai finalement rien trouvé qui correspondait à ce que je voulais, un genre de compromis entre le window.open et le dhtml, je m'explique :

à partir mon blog avec ses div et leur id, j'aimerai avoir un petit lien qui dirait "ouvrir ce post dans une popup",

donc en code > tu me trouves l'id "mon_post" et tu l'ouvres dans une nouvelle fenêtre popup (avec ses options : scrollbar, size, ..), tout en gardant la div dnas la page initiale (pourquoi pas)

un peu à l'image de gmail pour ouvrir un mail dans une nouvelle fenêtre quoi, mais j'ai pas réussi à decrypter leur gros bordel de code Smiley confus

merci boucou pour votre aide !

j'ai perdu bien trop d'heures là-dessus Smiley biggol
Modifié par Zohamo (02 Sep 2010 - 21:14)
Bonsoir,

À partir du moment où tu veux ouvrir une nouvelle fenêtre, il faut d'abord recenser ce que proposent les navigateurs web comme méthodes destinées à ça. Donc:
- implémentation exacte de window.open() dans les différents navigateurs?
- autres méthodes disponibles?
Tu peux commencer tes recherches. Smiley smile

Ce qui t'intéressera à priori, c'est de savoir quels paramètres tu peux passer à ces méthodes. Est-ce que c'est forcément une URL? Est-ce que ça peut être un élément DOM?
-> Si tu peux passer un élément DOM en paramètre, alors tu as ta solution toute trouvée.
-> Si c'est forcément une URL, alors il te faut un script côté serveur qui va retourner comme contenu une portion de ta page.
---> Si tu veux permettre l'ouverture dans une nouvelle fenêtre de contenus bien précis, ça ne devrait pas poser de difficulté.
---> Si par contre tu veux permettre l'ouverture dans une nouvelle fenêtre d'un élément arbitraire du DOM, là il faut sortir l'artillerie lourde: avoir une copie complète de la page HTML servie (en supposant que le DOM n'est pas ou très peu modifié après chargement en JS...), utiliser un parseur HTML côté serveur pour isoler un élément précis.
merci pour l'explication très clairement détaillée ...

j'avoue que j'aurais préféré qq lignes de code à taper Smiley cligne

mais ça m'aiguillera pas mal dans ma recherche ...

ensuite, j'utilise dotclear comme moteur de blog, il me restera à trouver une bidouille compatible avec ça aussi... Smiley murf
Zohamo a écrit :
j'avoue que j'aurais préféré qq lignes de code à taper Smiley cligne

Je n'ai pas la réponse (comme souvent en JavaScript, car je ne suis pas expert de ce langage). Donc je donne des repères et une méthodologie pour aboutir à la réponse. Smiley cligne

Zohamo a écrit :
j'utilise dotclear comme moteur de blog, il me restera à trouver une bidouille compatible avec ça aussi...

Si c'est une solution en JavaScript «pur», il suffira de modifier le thème. Pour une solution avec une composante côté serveur, il faudra sans doute développer un plugin Dotclear (en PHP).
Voici un bout de code javascript qui pourrait t'aider Smiley rolleyes !!!
Moi je l'utilisais pour afficher une image.
Maintenant je me suis orienté sur la techno "shadowbox"=> http://www.shadowbox-js.com/ qui est super. En plus c'est gratuit.

function PopupImage(img) 
{ 
	titre="Agrandissement"; 
	w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no'); 
	w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>"); 
	w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+30,document.images[0].height+150); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>"); 
	w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
	w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
	w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='Mon image'>"); 
	w.document.write("</TD></TR></TABLE>");
	w.document.write("</BODY></HTML>"); 
	w.document.close(); 
}
ah bin ça m'a l'air pas mal du tout ! merki boucou ! Smiley smile

j'essaie ça de suite !

et pour shadowbox, c'est un genre de lightbox ou thickbox non ?
je voulais justement éviter ce genre de truc pour en revenir à une vraie bonne vieille fenêtre oldschool, en fait dans le but d'y coller également un player audio, et donc pour permettre de continuer la navigation sur la fenêtre "mère"
Sujet clos
Aller à