Créer une fenêtre pop up dans une Ibox

Très joli effet lightbox pour cette fenêtre pop up. Attendez le chargement complet de la page et admirez le résultat en cliquant sur :

It is a hidden div!

If you were to view source, you would find a div called 'inner_content'. This is that div. We have used CSS to set its display property to none, but using iBox, you can clearly see it as an overlay. Hurrah!

It is even styled. Oh so pretty it is

#inner_content

Cette astuce requiert la possibilité d'utiliser du javascript.

Etape 1 :

Allez sur Ibox

Cliquez sur ibox.2.17c.zip

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, Mes Documents - Autres fichiers :

• vous créez un répertoire ibox 
• dans lequel vous créez un sous-répertoire images
• dans lequel vous enregistrez : bg.png. Vous notez l'adresse de cette image.
  

Etape 3 :

Sur votre PC :

• vous ouvez votre Bloc-Notes, 
• vous ouvrez le fichier ibox.js que vous avez sauvegardé à l'étape 1
• dans ce fichier, vous recherchez la ligne où figure le fichier bg.png
• vous modifiez son adresse (vous l'avez noté à l'étape 2)

vous enregistrez sous le même nom : ibox.js

Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - Répertoire ibox :

• vous enregistrez le fichier ibox.js (que vous venez de modifier)
• vous notez son adresse.

Etape 5 :

En HTML de l'article où vous voulez placer cette fenêtre pop up, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script>
<div id="inner_content" style="display:none;">
<div style="background:#000000;color:#ffffff;border:1px dashed FFFFFF;padding:15px;margin:15px;">
        <h3>It is a hidden div!</h3>
        <p>If you were to view source, you would find a div called 'inner_content'. This is that div. We
have used CSS to set its display property to none, but using <a href="/blog/p_ibox.html">iBox</a>,
you can clearly see it as an overlay. Hurrah!</p>
        <p>It is even styled. Oh so pretty it is</p>
    </div>
    </div>
    <p>
    <a href="#inner_content" rel="ibox" title="Loading Internal HTML Content" >#inner_content</a>
    </p>

Vous personnalisez ce code :

• en rouge, l'adresse de votre fichier ibox.js : vous l'avez noté à l'étape 4
  
• en bleu, le nom du lien qui apparaît sur le blog
  
• en vert, votre texte qui figurera dans la fenêtre.

Bon à savoir : si votre blog est sur OverBlog, vous pouvez utiliser mon fichier ibox.js. Il ne vous reste qu'à modifier les mots en bleu et vert pour placer cette fenêtre sur votre blog.