CSS, Javascript e HTML per un effetto molto interessante
Quando volete creare un layer trasparente che vada a coprire la pagina web sottostante per evitare, ad esempio, che l’utente clicchi due volte un tasto submit o altri tasti presenti nella pagina dopo che ha già compiuto una determinata azione, potete seguire questi consigli. Lo stesso codice farà anche apparire una barra di caricamento che aiuta a dissipare le ansie di chi è davanti al monitor e attende una elaborazione lunga.
Creiamo il giusto stile
<style type="text/css">
td.loading { text-align: Center; color: #3B3C8C; font: Bold 11px Verdana; }
td.barra { background-color: #3B3C8C; border: Solid 1px #D4B600; }
#barra { background-color: #F7E86D; }
#percentuale { text-align: Center; color: #3B3C8C; font: Bold 10px Verdana; }
</style>
Definiamo un metodo javascript che si occupi di rendere visibile il layer e gestire la barra di avanzamento
<script language="JavaScript" type="text/JavaScript">
<!--
var espandi = 0;
function Loading() {
document.getElementById('layerBarraAvanzamento').style.visibility='visible'
//nomeForm.nomeCampo.funzionalita
barra.style.width = espandi;
espandi++;
percentuale.innerHTML = Math.round(espandi / 2) + "%";
if (espandi != 200) {
window.setTimeout("Loading(), 10");
}
}
//-->
</script>
Creiamo la parte che va nella sezione <body> della pagina, magari proprio all’inizio
<div id="layerBarraAvanzamento" style="position:absolute; left:0px; height:768px; width:1024px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/sfondo.png', sizingMethod='image'); top:0px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table width="222" cellpadding="1" cellspacing="10">
<tr>
<td class="loading">...Wait please...</td>
</tr>
<tr>
<td class="barra"><div id="barra"></div></td>
</tr>
<tr>
<td><div id="percentuale"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
