Jika Anda belum tahu, Anda dapat melihat contoh sederhana di bawah ini.
Salinan kode adalah sebagai berikut:
<Html>
<head>
<Title> Setelah jendela muncul, lapisan berikutnya bukan operasional </iteme>
<script>
Function Show () // Tampilkan lapisan tersembunyi dan lapisan pop-up
{
var hideobj = document.geteLementById ("hideBg");
hideBg.style.display = "block"; // Tunjukkan lapisan tersembunyi
hideBg.style.height = document.body.clientHeight+"px"; // Atur ketinggian lapisan tersembunyi ke ketinggian halaman saat ini
document.geteLementById ("hidebox"). style.display = "block"; // tunjukkan lapisan pop-up
}
fungsi hide () // lepaskan lapisan tersembunyi dan lapisan pop-up
{
document.geteLementById ("hideBg"). style.display = "none";
document.getElementById ("hidebox"). style.display = "none";
}
</script>
<tyle>
tubuh {margin: 0px; padding: 0px; text-align: center;}
#hideBg {position: absolute; kiri: 0px; atas: 0px;
Latar Belakang:#000;
Lebar: 100%; /*Lebar diatur ke 100%, sehingga lapisan latar belakang tersembunyi dapat menutupi halaman asli*/
filter: alpha (opacity = 60); /*Atur transparansi ke 60%*/
Opacity: 0.6; /*Tetapkan transparansi ke 60% di browser non -e*/
Tampilan: Tidak Ada; / * //www.vevb.com *//
z-index: 2;}
#hidebox {position: absolute; lebar: 400px; tinggi: 300px; atas: 200px; kiri: 30%; latar belakang-warna: #ffff; tampilan: tidak ada; kursor: pointer; z-index: 3;}
#content {text-align: center; kursor: pointer; z-index: 1;}
</tyle>
</head>
<body>
<Div id = "hideBg"> </div>
<div id = "hidebox" ontClick = "hide ();"> klik untuk menutup </div>
<div id = "content" ontClick = "show ();"> klik untuk mencoba </div>
</body>
</html>