22 juil. 2010

Créer une fenêtre pop up qui disparaît avec WindowGrowl

Ce script permet d'ouvrir des fenêtres pop up qui, en plus de disparaître automatiquement, ont un joli effet lightbox. Cette astuce requiert la possibilité de mettre du javascript sur son blog.

Attendez le chargement complet de cette page et testez. Vous verrez le résultat est très sympa. Cliquez sur chacun de ces liens :












Etape 1 :

Allez sur Window.Growl

Cliquez sur Download Window.Growl 2.0 with MooTools 1.2beta2

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers

Etape 2 :

Dans l'administration de votre blog, Documents, Autres Fichiers :
  • créez un répertoire : growl
  • dans lequel vous enregistrez les images bezel.png et smoke.png
  • vous notez leur adresse

Etape 3 :

Sur votre PC, vous ouvrez votre bloc-note :
  • vous appelez le fichier growl.js (que vous avez enregistré à l'étape 1)
  • vous mettez à jour les adresses des images (vous les avez noté à l'Etape 2) : bezel.png et smoke.png
  • vous enregistrez le fichier sous le même nom : growl.js
Etape 4 :

Dans l'administration de votre blog, Documents, Autres Fichiers, growl :
  • vous enregistrez les fichiers : mootools-1.2b2.js et growl.js
  • vous notez leur adresse

Etape 5 :

En HTML de votre article, vous collez :

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/growl/mootools-1.2b2.js" type="text/javascript"></script>

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/growl/growl.js" type="text/javascript"></script>

<script type="text/javascript">//Window.Growl 2.0 with MooTools 1.2beta2

Growl.Smoke({

    title: 'Window.Growl By Daniel Mota',

    text: 'http://icebeat.bitacoras.com',

    image: 'growl.jpg',

    duration: 2

});

</script>

<ul>

        <li><a href="#" id="smoke" title="Show msg Smoke">Show Growl Smoke.</a></li>

        <li><a href="#" id="bezel" title="Show msg Bezel">Show Growl Bezel.</a></li>

  

    </ul>

<script type="text/javascript" charset="utf-8">

        $('smoke').onclick = function() {

            Growl.Smoke({});

            return false;

        };

  

        $('bezel').onclick = function() {

            Growl.Bezel({

                title: 'Window.Growl<br />By Daniel Mota'

            });

            return false;

        };

        var Log = {

          save: function() {

              new Request.HTML({url:'/log/save'}).post({'refer':document.referrer,'title':document.title});

          }

        };

        Log.save();

    </script>

Vous personnalisez :
  • en rouge, l'adresse de vos fichiers js, vous les avez noté à l'étape 4
  • en bleu, le contenu de la fenêtre
  • en vert, le nom du lien
Bon à savoir : si votre blog est sur OverBlog, vous pouvez utiliser les adresses de les fichiers js ; vous n'avez plus qu'à modifier les lots en bleu et en vert.

3 commentaires:

  1. Ce fichier est impossible à réaliser !
    Bonne soirée.

    RépondreSupprimer
  2. Bonjour Sagan :) C'est d'ailleurs pour cette raison qu'il fonctionne dans mon exemple ;)
    Le javascript est compliqué à manier. Ce n'est pas parce qu'on n'arrive pas à réaliser quelque chose, quel que soit le domaine, que ce n'est pas possible. Mais c'est un état d'esprit qui dépasse le blogging ;)

    RépondreSupprimer
  3. Désolée Anna, quand vous parlez de manier le Css, il manque des précisions, ne le prenez pas mal.
    J'ai suivi strictement vos consignes. Pourtant, croyez-moi j'aurais aimé réaliser votre script avec elles....
    Quand vous dites :
    - En rouge ok : j'ai mis mes propres adresses.
    - En bleu : quand je regarde mon PC, l'article est tout bleu hormis le rouge et le vert. Donc, il est très difficile de savoir quels sont les termes qu'il faut modifier exactement.
    - En vert : le nom des liens ? je suppose qu'on peut écrire ce que l'on veut, puisqu'il n'y a pas de lien ( bien sûr si j'ai bien compris).
    Par contre, que fait-on des deux autres adresses qu'on a notées ? (les adresses de smoke et de bezel), vous ne parlez pas de celles-là, on ne les a pas relevées pour rien mais elles ne sont pas citées. Donc on ne sait pas exactement où il faut les mettre.
    Bien sûr, je comprends très bien que vous n'avez pas à nous "mâcher le travail", mais, si je peux me permettre, dans ce cas précis, pour ma petite personne incompétente en matière de CSS, elles sont un peu succinctes, je n'ai pas vos compétences ...
    Ceci n'est qu'un encart, bien évidemment, votre blog est une mine de renseignements dans laquelle je me rends chaque jour par rapport à tout ce travail que vous avez fourni pour les blogueurs.
    Il n'empêche que parfois on reste sur sa faim.
    Bonne soirée Anna.

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)