Artikel ini menjelaskan metode menerapkan lapisan pop-up yang mencakup seluruh halaman oleh JS dan CSS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Gaya dan struktur umum untuk latar belakang transparan berbingkai pada lapisan pop-up adalah sebagai berikut:
Salinan kode adalah sebagai berikut: .AlerTMessageBg {
Posisi: diperbaiki;
_Posisi: absolut;
Lebar: 100%;
Tinggi: 100%;
Kiri: 0;
TOP: 0;
Latar belakang:#000;
Opacity: 0,5;
-Moz-opacity: 0,5;
filter: alpha (opacity = 50);
z-index: 97;
Tampilan: Tidak Ada;
}
.AlertMessageDivborder {
Posisi: diperbaiki;
_Posisi: absolut;
Lebar: 750px;
Tinggi: 370px;
Kiri: 50%;
Atas: 50%;
margin: -185px 0 0 -375px;
Latar belakang:#000;
filter: alpha (opacity = 30);
-Moz-opacity: 0.3;
Opacity: 0.3;
z-index: 98;
Tampilan: Tidak Ada;
}
.AlerTmessagediv {
Posisi: diperbaiki;
_Posisi: absolut;
Lebar: 730px;
Tinggi: 350px;
Kiri: 50%;
Atas: 50%;
margin: -175px 0 0 -365px;
Latar belakang: #FFF;
z-index: 99;
Tampilan: Tidak Ada;
Ukuran font: 14px;
}
<div> </div>
<div> </div>
<div> </div>
Cara menutup seluruh halaman web dengan latar belakang pop-up
1.CSS Metode
Salinan kode adalah sebagai berikut: .AlerTMessageBg {
Posisi: diperbaiki;
_Posisi: absolut;
Lebar: 100%;
Tinggi: 100%;
Kiri: 0;
TOP: 0;
Latar belakang:#000;
Opacity: 0,5;
-Moz-opacity: 0,5;
filter: alpha (opacity = 50);
z-index: 97;
Tampilan: Tidak Ada;
}
2. Metode JS
Salinan kode adalah sebagai berikut: .AlerTMessageBg {
Posisi: Absolute;
Lebar: 100%;
Tinggi: 100%;
Kiri: 0;
TOP: 0;
Latar belakang:#000;
Opacity: 0,5;
-Moz-opacity: 0,5;
filter: alpha (opacity = 50);
z-index: 97;
Tampilan: Tidak Ada;
}
var bgwidth = document.body.clientwidth + 'px',
bgheight = document.body.clientHeight + 'px',
alertBgnode = $ ('. AlertMessageBg');
alertbgnode.css ({'width': bgwidth, 'height': bgheight});
Membandingkan dua metode di atas, jelas bahwa metode CSS lebih mudah, terutama sekarang karena tidak perlu kompatibel dengan IE6.
Saya harap artikel ini akan membantu untuk desain pemrograman web berbasis JS semua orang.