Bagaimana untuk melaksanakan lapisan pop timbul meliputi seluruh halaman menggunakan kemahiran js dan css_javascript

Contoh dalam artikel ini menerangkan kaedah menggunakan js dan css untuk melaksanakan lapisan pop timbul meliputi seluruh halaman. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Gaya dan struktur biasa lapisan pop timbul dengan bingkai latar belakang lutsinar adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

.alertMessageBg{
kedudukan:tetap;
_kedudukan:mutlak;
lebar:100%;
ketinggian:100%;
kiri:0;
atas:0;
latar belakang:#000;
kelegapan:0.5;
-moz-opacity:0.5;
penapis:alpha(opacity=50);
indeks-z:97;
paparan:tiada;
}
.alertMessageDivBorder{
kedudukan:tetap;
_kedudukan:mutlak;
lebar:750px;
ketinggian:370px;
kiri:50%;
atas:50%;
jidar:-185px 0 0 -375px;
latar belakang:#000;
penapis:alpha(opacity=30);
-moz-opacity:0.3;
kelegapan:0.3;
indeks-z:98;
paparan:tiada;
}
.alertMessageDiv{
kedudukan:tetap;
_kedudukan:mutlak;
lebar:730px;
ketinggian:350px;
kiri:50%;
atas:50%;
jidar:-175px 0 0 -365px;
latar belakang:#fff;
indeks-z:99;
paparan:tiada;
saiz fon:14px;
}

Cara menutup keseluruhan halaman web dengan latar belakang lapisan pop timbul

kaedah 1.css

Salin kod Kod adalah seperti berikut:

.alertMessageBg{
kedudukan:tetap;
_kedudukan:mutlak;
lebar:100%;
ketinggian:100%;
kiri:0;
atas:0;
latar belakang:#000;
kelegapan:0.5;
-moz-opacity:0.5;
penapis:alpha(opacity=50);
indeks-z:97;
paparan:tiada;
}

Kaedah 2.js

Salin kod Kod adalah seperti berikut:

.alertMessageBg{
kedudukan:mutlak;
lebar:100%;
ketinggian:100%;
kiri:0;
atas:0;
latar belakang:#000;
kelegapan:0.5;
-moz-opacity:0.5;
penapis:alpha(opacity=50);
indeks-z:97;
paparan:tiada;
}

var bgWidth = document.body.clientWidth 'px',
bgHeight = document.body.clientHeight 'px',
alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});

Membandingkan dua kaedah di atas, adalah jelas bahawa kaedah css lebih bebas masalah, terutamanya sekarang kerana ia tidak serasi dengan IE6.

Saya harap artikel ini akan membantu pengaturcaraan web semua orang berdasarkan JS.