Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels jQuery

Devenez un professionnel de la programmatique Javascript grâce à la librairie la plus efficace du marché !

Tutoriels jQuery

Plugin jQuery « Popin » (Maj du 01/04/09)

Après l’affreuse mode des pop-ups dans les années 90, aujourd’hui ce sont les popins qui font la loi. Voici donc un petit plugin jQuery fait maison pour ajouter facilement des popins à votre site.

Publié il y a déjà trop longtemps…

Pour l’instant, il s’agit juste d’un version beta. Mais je l’améliorerai par la suite.

Voici son fonctionnement :

  • Testé et fonctionnel sur :
    • IE6
    • IE7
    • FF3
    • SF3
    • OP9
    • GC1
  • Application aux liens (balise <a>)
  • Requête Ajax sur les URL href des liens
  • Options paramétrables :
    loaderImg
    Image du loader
    opacity
    Opacité du voile (0 à 1)
  • Fermeture via un lien automatiquement intégré dans la popin ou touche Esc
  • Blocage du défillement lorsque la popin est affichée
  • Popin toujours centrée si on redimensionne la fenêtre

Voir la page du plugin jQuery Popin

Mise à jour du 1er Avril 2009

  • Définition de la taille de la popin dans les paramètres
  • Suppression de l’intégration d’office du bouton fermer
  • Ajout de fonctions de callback
  • Fermeture de la popin sur un clic externe
  • Internalisation des styles CSS
  • Résolution de bug sur l’ouverture de la popin

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

  1. jeanpaul8

    Bonjour,

    excellent code, j’ai cependant une question, il semble que le php présent sur la page affichée en popin ne soit pas pris en compte ?!?

    Merci d’avance.

    • Shemu

      Le plugin fait une requête Ajax, peu importe ce qu’il y a derrière.

  2. Lauri

    Juste un bon code, et merci pour la grâce!

  3. General

    Merci pour ce tuto efficace et très "dans l’air" !

    Moi qui suis débutant en javascript/AJAX j’ai pu, après quelques bidouilles, l’installer et l’adapter à mes besoins.

    J’ai cependant une question : est-il possible de faire un lien à l’intérieur de la popin qui pointe sur une autre popin du même genre ? Et si oui, de quelle manière ?

    Merci encore pour ce script et bonne continuation !

    • Shemu

      Le plugin sera bientôt mis à jour, et l’on pourra faire ceci via une fonction de callback.

  4. TheBAT

    Salut,

    Peut-on afficher cette popin au chargement de la page ?

    Merci.
    Bonne journée.

  5. Etienne

    Merci pour ce code…
    pour info a la fermeture du popin j’ai remplacé

    $("html, body").css("overflow", "auto");
    par
    $("html, body").css("overflow", "visible");

    semblerai que ca marche mieux…

Les commentaires sont clos.