Saya pikir semua orang telah melakukan fungsi umum seperti lapisan topeng, yang dapat diimplementasikan dengan css atau jquery. Metode implementasinya beragam. Di sini http://Saya akan memperkenalkan metode yang saya terapkan dalam proyek ini. Masker layar penuh dapat dioperasikan, sangat praktis.
Efeknya adalah sebagai berikut:
bagian implementasi js:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
var myAlert = dokumen.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
reg.onclick = fungsi() {
myAlert.style.background = "#e2ecf5";
myAlert.style.zIndex = "501";
myAlert.style.position = "mutlak";
var signSpan = dokumen.getElementById("signSpanId");
myAlert.style.top = signSpan.offsetTop;
myAlert.style.left = signSpan.offsetLeft;
mybg = dokumen.createElement("div");
mybg.setAttribute("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "mutlak";
mybg.style.top = "0";
mybg.style.kiri = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0,3";
mybg.style.filter = "Alfa(opacity=30)";
document.body.appendChild(mybg);
//document.body.style.overflow = "tersembunyi";
}
</skrip>
Kode halaman:
Copy kode kodenya sebagai berikut:
<!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">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
</kepala>
<tubuh>
<tabel align="tengah">
<tr>
<td style="ukuran font:28px; berat font:bold">
<div id="konten">
<a href="#">
Aktifkan lapisan topeng
</a>
</div>
</td>
<td style="vertikal-align:top">
<div id="signSpanId" style="posisi:absolute;"></div>
<div id="peringatan" align="atas">
<h4>
<rentang>
Ini adalah area yang disorot
</span>
</h4>
<p>
<label>
nama belakang
</label>
<tipe masukan="teks" />
</p>
<p>
<label>
kata sandi
</label>
<masukan tipe = "kata sandi" />
</p>
<p>
<input type="kirim" value="Daftar" />
<input type="reset" value="Reset" />
</p>
</div>
</td>
<td>
<div>Saya kolom ketiga</div>
</td>
</tr>
</tabel>
</tubuh>
</html>