Dans le même esprit que la
LightBox, un petit outil simple que j'utilise pour mon profil, mais on peut s'en servir comme un pop-up pour n'importe quoi.
Même procédé, allez sur
ce site, puis vous téléchargez le fichier
ibox.2.2.zip. et décompressez-le. Chargez les images sur votre blog (elles sont situées dans le dossier "
images").
Seule phase pénible, ouvrez le fichier ibox.js dans le bloc-note,
trouvez ce bout de code qui se situe environ aux
trois quarts (ne le collez pas dans votre propre document, je ne donne cela qu'à titre de repère) :
// TODO: why isnt this using DOM tools
// a trick on just creating an ibox wrapper then doing an innerHTML on our root ibox element
els.container = document.createElement('div'); els.container.id = 'ibox';
els.overlay = document.createElement('div');
els.overlay.style.display = 'none';
_pub.setOpacity(null, els.overlay, 0);
// firefox mac has issues with opacity and flash
if (!_pub.is_firefox) els.overlay.style.background = '#000000';
else els.overlay.style.backgroundImage = "url('" + _pub.base_url + "http://votreblog.cowblog.fr/images/bg.png')";
els.overlay.id = 'ibox_overlay';
params = {position: 'absolute', top: 0, left: 0, width: '100%'};
_pub.updateObject(els.overlay.style, params);
els.overlay.onclick = _pub.hide;
els.container.appendChild(els.overlay);
Changez seulement la partie en rouge. Enregistrez le fichier en le nommant ibox.js. Uploadez ensuite ce fichier sur un site de partage.
Ouvrez un module HTML libre, et collez ce code :
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/130850153467357179/ibox.js"></script>
<div id="inner_content" style="display:none;">
<div style="height: 200px;">
<h3>Un titre facultatif</h3>
<p>Contenu de votre iBox</p>
</div>
</div>
Ensuite collez ce bout de code où vous voulez que lien de votre iBox apparaisse (dans un module HTML libre, dans une page statique, dans un article..)
<a href="#inner_content" rel="ibox" title="Le titre qui apparaîtra en grisé en dessous du texte" >Texte du lien</a>
En bleu ce qu'il faut changer. En orange, ce que vous pouvez changer à votre guise.
Au niveau du CSS, dans le dossier "skins" vous avez deux styles possibles (Darkbox et Lightbox), que je trouve personnellement assez moches. Donc vous pouvez soit coller directement le contenu de ces fichiers dans votre feuille de style, soit coller mon propre code, celui que j'ai utilisé dans la démo, qui est le suivant :
/* IBOX */
#ibox_wrapper {
line-height:25px;
border-color:#C0C0C0;
border-width:2px;
border-style:solid;
}
#ibox_wrapper, #ibox_footer_wrapper a {
background-color:#fff;
}
#ibox_content {
background-color:#fff;
border:0;
margin: 10px 10px 40px 10px;
font-family:georgia;
font-size:8pt;
text-align:justify;
padding:0px 10px 0px 0px;
line-height:14px;
}
#ibox_footer_wrapper {
line-height: 25px;
bottom: 5px;
top: auto;
color:#D0D0D0;
}
#ibox_footer_wrapper a {
text-indent: -100000px;
border:0;
background: #fff url('http://votreblog.cowblog.fr/images/closelabel.gif') center center no-repeat;
width: 66px;
padding: 0;
height: 22px;
line-height: 22px;
}
#ibox_footer_wrapper a:hover {
background-color:#fff;
}
#ibox_loading {
text-indent: -100000px;
width: 200px;
height: 200px;
background: #fff url('http://votreblog.cowblog.fr/images/loading.gif') center center no-repeat;
}
#ibox_wrapper h3 {
text-decoration:underline;
}
Ou faire le votre !
"ul" et "li" modifient les propriétés des listes.
de "Articles". L'organisation est la suivante :
Si la case contient ce qui correspond à un lien (comme (titre) ou (catégorie) ou (commentaires)..), il faudra rajouter un "a" de cette façon :
Bonus ! Vous surfez sur le web, et une couleur vous tape à l'oeil. Vous n'avez pas envie de faire une capture d'écran, de l'ouvrir dans photofiltre, d'extraire la couleur.. Vous pouvez "pipetter" la couleur directement dans la page web grâce à