Ich denke, jeder hat gängige Funktionen wie Maskenebenen ausgeführt, die mit CSS oder JQuery implementiert werden können. Hier werde ich die von mir im Projekt implementierte Methode der Vollbildmaske vorstellen sind bedienbar, sehr praktisch.
Der Effekt ist wie folgt:
js-Implementierungsteil:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
reg.onclick = function() {
myAlert.style.background = "#e2ecf5";
myAlert.style.zIndex = "501";
myAlert.style.position = "absolute";
var signSpan = document.getElementById("signSpanId");
myAlert.style.top = signSpan.offsetTop;
myAlert.style.left = signSpan.offsetLeft;
mybg = document.createElement("div");
mybg.setAttribute("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
//document.body.style.overflow = "hidden";
}
</script>
Seitencode:
Kopieren Sie den Codecode wie folgt:
<!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">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<Körper>
<table align="center">
<tr>
<td style="font-size:28px; font-weight:bold">
<div id="content">
<a href="#">
Maskenebene aktivieren
</a>
</div>
</td>
<td style="vertical-align:top">
<div id="signSpanId" style="position:absolute;"></div>
<div id="alert" align="top">
<h4>
<span>
Dies ist der hervorgehobene Bereich
</span>
</h4>
<p>
<Beschriftung>
Benutzername
</label>
<input type="text" />
</p>
<p>
<Beschriftung>
Passwort
</label>
<input type="password" />
</p>
<p>
<input type="submit" value="Register" />
<input type="reset" value="Reset" />
</p>
</div>
</td>
<td>
<div>Ich bin die dritte Spalte</div>
</td>
</tr>
</table>
</body>
</html>