Si vous utilisez jQuery, alors:
HTML:
<a id="openMap" href="/map/">link</a>
JS:
$(document).ready(function() {
$("#openMap").click(function(){
popup('/map/', 300, 300, 'map');
return false;
});
});
Cela a l'avantage de fonctionner toujours sans JS, ou si l'utilisateur clique du milieu sur le lien.
Cela signifie également que je pourrais gérer les popups génériques en réécrivant à nouveau dans:
HTML:
<a class="popup" href="/map/">link</a>
JS:
$(document).ready(function() {
$(".popup").click(function(){
popup($(this).attr("href"), 300, 300, 'map');
return false;
});
});
Cela vous permettrait d'ajouter un popup à n'importe quel lien en lui donnant simplement la classe popup.
Cette idée pourrait être étendue encore plus loin comme ceci:
HTML:
<a class="popup" data-width="300" data-height="300" href="/map/">link</a>
JS:
$(document).ready(function() {
$(".popup").click(function(){
popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
return false;
});
});
Je peux maintenant utiliser le même morceau de code pour beaucoup de popups sur tout mon site sans avoir à écrire des tas de trucs onclick! Yay pour la réutilisabilité!
Cela signifie également que si plus tard je décide que les popups sont une mauvaise pratique, (ce qu'ils sont!) Et que je veux les remplacer par une fenêtre modale de style lightbox, je peux changer:
popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
à
myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
et tous mes popups sur tout mon site fonctionnent maintenant de manière totalement différente. Je pourrais même faire une détection de fonctionnalités pour décider quoi faire sur une fenêtre contextuelle, ou stocker une préférence d'utilisateurs pour les autoriser ou non. Avec le onclick en ligne, cela nécessite un énorme effort de copie et de collage.