Vous connaissez certainement tous le script lightbox.js qui vous permet d’afficher des images dans des boite de dialogue ajax. Ce script est excellent mais reste limité en terme de modification et surtout, c’est assez lourd.
On commence par créer vos styles css
-
-
<style type="text/css">
-
-
#shad {
-
position:absolute;
-
top:0;
-
left:0;
-
right:0;
-
width:100%;
-
height:100%;
-
height:6000px;
-
z-index:5000;
-
background-color:#000000;
-
-moz-opacity: 0.6;
-
opacity:.60;
-
filter: alpha(opacity=60);
-
}
-
-
#modbox{
-
-
display:none;
-
-
position: absolute;
-
-
top:50%;
-
-
left:50%;
-
-
z-index:9999;
-
-
width:380px;
-
-
border:2px solid #EAEAEA;
-
-
text-align:left;
-
-
overflow: auto;
-
-
margin-top: -260px;
-
-
margin-right: 0;
-
-
margin-bottom: 0;
-
-
margin-left: -200px;
-
-
padding-left: 20px;
-
-
padding-right: 20px;
-
-
padding-top: 10px;
-
-
padding-bottom: 10px;
-
-
background-color: #E0F5FE;
-
-
font-size: 18px;
-
-
font-weight: bold;
-
-
color: #003366;
-
-
}</style>
Je vous conseille de ne pas toucher aux style de #shad, par contre, #modbox peut être adapté sans problème
Ensuite, créer ces 2 fonctions JS:
-
-
<script type="text/javascript">
-
function showmodal(htmls,wid){
-
-
var actualposition = document.documentElement.scrollTop ;
-
var modbox = document.getElementById(‘modbox’);
-
var shad = document.getElementById(’shad’);
-
document.body.style.overflow=‘hidden’;
-
modbox.innerHTML=htmls;
-
modbox.style.marginTop = (actualposition-260)+"px";
-
shad.style.display="block";
-
modbox.style.display="block";
-
document.getElementsByTagName("html")[0].style.overflow = "hidden";
-
if (wid) {
-
modbox.style.width=wid+‘px’;
-
modbox.style.marginLeft=-((wid+20)/2)+‘px’;
-
}
-
window.scrollTo(0,actualposition);
-
-
-
}
-
-
function closemodal()
-
-
{
-
-
var modbox = document.getElementById(‘modbox’);
-
-
var shad = document.getElementById(’shad’);
-
-
modbox.innerHTML=”;
-
-
modbox.style.width=”;
-
-
modbox.style.marginLeft=”;
-
-
shad.style.display="none";
-
-
modbox.style.display="none";
-
-
document.body.style.overflow=”;
-
-
document.getElementsByTagName("html")[0].style.overflow = "";
-
-
}
-
-
</script>
Comme vous le constaterez, showmodal() permet d’afficher la boite alors que closemodal() la fermera
Pour finir, en dessous de la balise <body> , placer ces 2 div :
-
-
<div id="shad" onclick="closemodal();" style="display:none"></div>
-
-
<div id="modbox" style="display:none"></div>
pour afficher la boite de dialogue, vous devez appeler cette fonction:
-
-
<a href="#" onclick="showmodal(’hello à tous’,300); return false">Cliquez ici</a>
ou encore pour afficher une image
-
-
<a href="#" onclick="showmodal(’<img mce_tsrc=" alt=""mon" width=""157"" height=""164"">’,160); return false">Cliquez ici</a>
Hmm, sympa ça comme truc ça.. Je sens que je vais le garder bien au chaud ^^
Le seul défaut que je pourrais trouver au script actuel, c’est que la box s’affiche tout en haut de la page. Cela pourrait peut-être être intéressant qu’elle s’affiche à l’endroit où on est dans la page.