ALL HTML - Popup accessible avec bouton de fermeture

retour

Popup accessible avec bouton de fermeture

Article publié le lundi 10 juillet 2006 par koala64.
Cet article est classé dans les catégories « Javascript »

Ce script montre comment faire une popup accessible avec un bouton de fermeture.

Popup accessible avec bouton de fermeture

Description

Ces 2 scripts DOM sont non intrusifs et montrent comment faire une popup accessible avec un bouton de fermeture.

Pour générer la popup, vous devez lier le script popup.js à votre page html en insérant...
<script src="popup.js" type="text/javascript"></script>
... entre les balises head de votre page puis vous ajoutez la classe popup à chaque lien que vous souhaitez affecter :
<a href="lien.htm" class="popup">lien</a>
Dans la page faisant office de popup, vous devez lier le script serial-popup-killer.js en ajoutant...
<script src="serial-popup-killer.js" type="text/javascript"></script>
... entre les balises head de celle-ci pour que le bouton de fermeture s'ajoute automatiquement en fin de page.

Si vous cliquez sur le lien et que le javascript est activé, vous ouvrez la popup et retrouvez votre bouton de fermeture. Dans le cas où l'utilisateur ne dispose pas de ce langage, il peut néanmoins accéder à l'url car le lien s'ouvre dans la page courante, mais cette fois sans le bouton.

Scripts

popup.js


// Création d'un objet
var o = {};

// Propriétés Popup de l'objet
o.Popup =
{

	// Initialisation de l'objet
	__Init__: function()
	{
		if( !document.getElementsByTagName ) return false;
		return o.Popup.__Manager__();
	},

	// Gestionnaire de l'évènement onclick sur les liens possédant la classe 'popup'.
	__Manager__: function()
	{
		var oLink = document.getElementsByTagName( 'a' ),
			a = oLink.length - 1;
		for( a ; a >= 0 ; a-- )
		{
			if( oLink[a].className == 'popup' )
			{
				oLink[a].onclick = o.Popup.__Open__;
			}
		}
	},

	// Méthode d'ouverture de la popup
	__Open__: function()
	{
		window.open( this.href , '' , 'top=200 , left=200 , width=200 , height=100 , scrollbars=yes' );
		return false;
	}

};

// Chargement de l'objet au lancement de la page.
window.onload = o.Popup.__Init__;

serial-popup-killer.js


// Création d'un objet
var o = {};

// Propriétés Popup de l'objet
o.Popup =
{

	// Initialisation de l'objet
	__Init__: function()
	{
		if( !document.getElementsByTagName ||
			!document.createElement ||
			!document.createTextNode ) return false;
		return o.Popup.__Handle__();
	},

	// Création et insertion du bouton de fermeture
	__Handle__: function()
	{
		var oBody = document.getElementsByTagName('body')[0],
			oA = document.createElement('a'),
			oTextA = document.createTextNode('Fermer la popup');
		oA.setAttribute('href','#');
		oA.setAttribute('id','kill');
		oA.appendChild(oTextA);
		oBody.appendChild(oA);
		oA.onclick = o.Popup.__Kill__;
	},

	// Méthode de fermeture de la popup
	__Kill__: function()
	{
		self.close();
	}

};

// Chargement de l'objet au lancement de la page.
window.onload = o.Popup.__Init__;

visualiser
télécharger

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le samedi 05 août 2006 à 16 h 29 par persolaser: Que c'est beau !!!
ça me rapelle les beaux jours où des informaticiens (;=)mdrr) élevaient la voix pour parler de leur métier au restaurant...

AVIS au publicateurs : la méthode "singe voit, singe fait" comporte de sérieuses limitations.

Donc :
N'aurait-il pas été judicieux, voire sympathique, d'intégrer quelques menus commentaires pour expliquer ce qui se passe, ligne après ligne ???

Bien sur, moi, béotien, j'y arrive en me torturant les méninges, mais mon interprétation peut être erronnée ...

J'avais lu en tête de page le mot "communauté". N'y a-t-il dans celle ci que des cracks, où est-elle aussi ouverte au débutants ???

Allez, bon courage et à bientôt
Commentaire publié le samedi 05 août 2006 à 18 h 38 par koala64: oui comme tu dis... sympathique. :\

Taper le coup de gueule alors que le minimum de commentaires pour comprendre la démarche s'y trouve, tu n'as même pas pris la peine de demander de l'aide, je suis ouvert aux questions en cas d'incompréhension, et surtout que tu parles de communauté alors que tu n'as jamais rien retransmis de ton savoir sur les forums d'Allhtml, c'est du beau oui...

Je ne prends pas les utilisateurs pour des singes et c'est pourquoi je n'ai pas détaillé le script ligne par ligne; j'estime qu'ils sont à même de l'étudier et qu'ils savent faire les démarches nécessaires lorsqu'ils ont des difficultés, à savoir, demander de l'aide sur les forums...
Commentaire publié le mercredi 10 janvier 2007 à 13 h 11 par jarodender: Bravo koala64

Ce n'est pas facile de trouver du code javascript non intrusif et respectant de bonnes normes de programmation

J'espère que ce genre de code inspirera d'autres développeurs javascript
Commentaire publié le mercredi 10 janvier 2007 à 13 h 41 par koala64: Merci ! :)

Je tiens quand même à faire une mise en garde par rapport aux popups...

Bien qu'ici, le code soit non intrusif, une popup est perturbante... la plupart du temps...

Les bonnes questions à se poser lorsqu'on implémente un tel système, c'est :

- Est-ce que l'utilisateur s'attend à une nouvelle fenêtre ? Est-elle souhaitable ? (penser au fait que celui-ci a peut être déjà plusieurs fenêtres ouvertes et qu'il tient à les conserver ainsi)
- Comment l'utilisateur va-t-il accéder à la page si Javascript n'est pas actif ? (prévoir une alternative)
- Si l'utilisateur clique sur la touche précédent de son navigateur, va-t-il retrouver toutes les pages qu'il a visité ? (Ce paramètre n'est pas pris en compte dans ce script) Encore une fois, est-ce souhaitable ?
- Si des infos importantes apparaissent dans cette popup, a-t-il accès au différents paramètres de son navigateur ? (bien peser le pour et le contre lorsqu'on supprime les barres d'adresse, d'état,... etc)
- Si l'utilisateur est malvoyant et qu'il navigue en ayant agrandit le texte, voit-il encore l'ensemble du contenu ? (Ne pas empêcher de redimensionner la popup, éviter la suppression des barres de défilement, etc...)
- ...

A mon sens, une popup ne sert à rien la plupart du temps... Rares sont les occasions où celle-ci peut se rendre utile... (ça peut l'être avec un formulaire d'identification par exemple)
On dispose aujourd'hui de nombreuses techniques DOM qui sont bien moins perturbantes pour l'utilisateur.

La règle d'or, c'est de s'adapter aux différentes utilisations des utilisateurs et non de leur imposer un contexte particulier.

A utiliser avec modération donc... ;-)
Commentaire publié le jeudi 28 février 2008 à 21 h 00 par Maclosky: Bonjour è toi,

Superbe ton script c'est rare de la qualité comme cela. J'aurais une question j'essaie d'aligner le lien de fermeture au centre.

J'ai esseyé ceci : oA.setAttribute('align', 'center'); et oTextA .setAttribute('align', 'center');

Mais cela ne fonctionne pas. Aurais-tu un conseil a me donner.

Merci
Commentaire publié le jeudi 28 février 2008 à 21 h 04 par Maclosky: Désolé d'avoir fait le post plus .... CSS est notre ami :)