Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan lapisan pop timbul meliputi seluruh halaman menggunakan kemahiran js dan css_javascript

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

WBOY
WBOYasal
2016-05-16 16:27:371737semak imbas

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.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn