ALL HTML - Gestionnaire de popup (DOM)

retour

Gestionnaire de popup (DOM)

Article publié le jeudi 01 juin 2006 par koala64.
Cet article est classé dans les catégories « Javascript »

Ce script est un gestionnaire de popup. Il est non intrusif (pas de code javascript dans la partie XHTML). Son principe est d'ouvrir chaque lien possédant une classe 'popup' dans une popup unique. Un paragraphe contenant un lien pour fermer la popup est généré sur la page principale.

Gestionnaire de popup (DOM)

Description

Script de gestion de popup qui permet de générer une nouvelle fenêtre paramétrée sur chaque lien qui possède une classe 'popup' . Lorsqu'on clique sur un second lien possédant cette classe, la popup se met à jour et reste donc unique. Un paragraphe, dans lequel se trouve un lien de fermeture, est généré dans la page principale.

Le script étant non intrusif (pas de code javascript dans la partie XHTML), un utilisateur ne disposant pas du javascript n'a qu'une liste de liens qu'il ouvre dans la page principale et celui qui possède ce langage dispose des fonctionnalités décrites ci-dessus.

Pour faire fonctionner ce script, vous devez lier le fichier popup.js à votre page XHTML en ajoutant la ligne suivante entre les balises head :
<script src="popup.js" type="text/javascript"></script>

A chaque lien qui doit s'ouvrir dans la popup, vous ajoutez la classe 'popup'.

Exemple:
<a href="http://koalnet.com" class="popup">Koalnet</a>

Le paragraphe et le lien de fermeture de la popup peuvent être mis en forme via CSS grâce à l'identifiant popup.

Le doctype est en XHTML 1.0 Transitionnal car l'ouverture d'une nouvelle fenêtre est une des particularités de cette déclaration... bien que le code soit malgré tout valide en XHTML 1.0 Strict.

Code XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Gestionnaire de popup (DOM)</title>
	<script src="popup.js" type="text/javascript"></script>

</head><body>

<ul>
	<li><a href="http://www.allhtml.com">Allhtml</a></li>
	<li><a href="http://koalnet.com" class="popup">Koalnet</a></li>
	<li><a href="http://www.alsacreations.com" class="popup">Alsacreations</a></li>
</ul>

</body></html>

Code Javascript

/**********************************************
Gestionnaire de popup (DOM)
koala64
**********************************************/


// Raccourci pour le script

var d = document;

// Creation d'un objet

var o = new Object;

// Creation d'une variable globale

var oNewWin = null;

// Proprietes Link de l'objet

o.Link =
{

	// Gestionnaire de l'evenement onclick pour chaque lien du document

	ClickHandler: function()
	{		

		// On recupere l'ensemble des liens dans un tableau puis
		// on parcourt le tableau. Si le lien possede une classe 'popup',
		// on lance la fonction popup.

		var oLink = d.getElementsByTagName( 'body' )[0].getElementsByTagName( 'a' );
		for( var a = 0 ; a < oLink.length ; a++ )
			if( oLink[a].className == 'popup' )
				oLink[a].onclick = o.Popup.__Open;

	},

	// Creation d'un lien dans la page principale pour supprimer la popup

	Destroy: function()
	{

		// On cree un paragraphe contenant un lien en lui donnant un identifiant,
		// ce qui permet de le manipuler via css...

		var oBody = d.getElementsByTagName( 'body' )[0];
		var oP = d.createElement( 'p' );
		oP.setAttribute( 'id' , 'popup' );
		var oLink = d.createElement( 'a' );
		oLink.setAttribute( 'href' , '#' );
		var oTextLink = d.createTextNode( '' );
		oTextLink.data = 'Fermer la popup';
		oBody.appendChild( oP );
		oP.appendChild( oLink );
		oLink.appendChild( oTextLink );

		// On affecte au lien la methode de fermeture de popup.

		oLink.onclick = o.Popup.__Close;

	}

}

// Proprietes Popup de l'objet

o.Popup =
{

	// Methode d'ouverture de la popup

	__Open: function()
	{

		// Si la popup n'existe pas, on en cree une avec le lien concerne puis
		// on annule l'activation du lien dans la fenetre principale.

		if( !oNewWin || oNewWin.closed )
		{
			oNewWin = window.open( this.href , '' , 'top=' + ((screen.height/2)-150) + ' , left=' + ((screen.width/2)-400) + ' , width=800 , height=300 , scrollbars=yes' );
			return false;
		}
		
		// Si la popup existe et qu'on clique sur un autre lien possedant une classe 'popup',
		// on passe l'url a la popup, on lui redonne le focus puis on annule l'activation du
		// lien dans la fenetre principale.

		else if( oNewWin && this.className == 'popup' )
		{
			oNewWin.location.href = this.href;
			oNewWin.focus();
			return false;
		}
		
		// Pour les autres cas, on active le lien dans la fenêtre principale.

		else
		{
			return true;
		}

	},
	
	// Methode de fermeture de la popup.

	__Close: function()
	{
		if( oNewWin )
		{
			oNewWin.close();
			oNewWin = null;
			return false;
		}
	}

}

// Proprietes Script de l'objet

o.Script =
{

	// Initialisation de l'objet

	Init: function()
	{
		o.Link.ClickHandler();
		o.Link.Destroy();
	}

}

// Chargement de l'objet au lancement de la page.

window.onload = o.Script.Init;

Visualiser
Télécharger

Plus d'informations :

Séparer le comportement de la structure

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le jeudi 01 juin 2006 à 07 h 57 par breizh_web: Super le tuto et bien expliqué, j'en comprends même le code et le raisonnement !

Ce qui est dommage, c'est que ça ne puisse marcher que sur un seul lien en même temps, mais bon, les choses peuvent toujours évoluer, merci à toi pour ce tutoriel ; )
Commentaire publié le samedi 03 juin 2006 à 15 h 31 par koala64: J'ai mis le tuto à jour afin qu'il soit possible d'affecter n'importe quel lien via l'ajout d'une simple classe... ;-)
Commentaire publié le samedi 21 octobre 2006 à 20 h 54 par renaud91: Bonjour,

Est-il possible de modifier les dimensions de la fenêtre popup ouverte? et si oui comment??

Merci d'avance
Commentaire publié le jeudi 16 novembre 2006 à 13 h 58 par koala64: Bonjour,

oui, en modifiant les valeurs définies pour width et height.