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);
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>
<a href="#inner_content" rel="ibox" title="Le titre qui apparaîtra en grisé en dessous du texte" >Texte du lien</a>
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;
}