Je pense que tout le monde a réalisé des fonctions courantes telles que les calques de masque, qui peuvent être implémentées avec CSS ou jquery. Ici http://Je vais présenter la méthode que j'ai implémentée dans le projet de masque plein écran. sont opérationnels, très pratiques.
L'effet est le suivant :
js partie implémentation :
Copiez le code comme suit :
<script type="text/javascript">
var monAlerte = document.getElementById("alerte");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
reg.onclick = fonction() {
monAlerte.style.background = "#e2ecf5";
monAlerte.style.zIndex = "501";
monAlerte.style.position = "absolu" ;
var signSpan = document.getElementById("signSpanId");
myAlert.style.top = signSpan.offsetTop ;
myAlert.style.left = signSpan.offsetLeft;
monbg = document.createElement("div");
monbg.setAttribute("id", "monbg");
monbg.style.background = "#000";
monbg.style.width = "100%" ;
monbg.style.height = "100%" ;
mybg.style.position = "absolu" ;
monbg.style.top = "0" ;
monbg.style.left = "0" ;
monbg.style.zIndex = "500" ;
monbg.style.opacity = "0,3" ;
monbg.style.filter = "Alpha(opacité=30)";
document.body.appendChild(monbg);
//document.body.style.overflow = "caché" ;
}
</script>
Code de la page :
Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</tête>
<corps>
<table align="centre">
<tr>
<td style="font-size:28px; font-weight:bold">
<div id="content">
<a href="#">
Activer le calque de masque
</a>
</div>
</td>
<td style="vertical-align:top">
<div id="signSpanId" style="position:absolute;"></div>
<div id="alerte" align="top">
<h4>
<envergure>
C'est la zone en surbrillance
</span>
</h4>
<p>
<étiquette>
nom d'utilisateur
</étiquette>
<input type="texte" />
</p>
<p>
<étiquette>
mot de passe
</étiquette>
<input type="mot de passe" />
</p>
<p>
<input type="submit" value="S'inscrire" />
<input type="reset" value="Réinitialiser" />
</p>
</div>
</td>
<td>
<div>Je suis la troisième colonne</div>
</td>
</tr>
</table>
</corps>
</html>