all html : Le portail des webmaster

Popup accessible avec bouton de fermeture

Cet article est actuellement publié sur le site.

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