Pada bab sebelumnya, saya memperkenalkan bahwa modul pengeditan sebagian area dapat ditambahkan ke halaman bertopeng. Dalam bab ini, saya akan memperkenalkan halaman induk untuk menampilkan lapisan topeng dan memunculkan dialog semi-transparan. Dialog adalah subhalaman pop-up, div.
Rendernya adalah sebagai berikut:
Implementasi kode spesifiknya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transisi//EN">
<HTML>
<KEPALA>
<TITLE> Dokumen Baru </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Penulis" CONTENT="">
<META NAME="Kata Kunci" CONTENT="">
<META NAME="Deskripsi" KONTEN="">
</KEPALA>
<gaya tipe="teks/css">
<!--
.div saya {
warna latar belakang: #FFFFFF;
batas: 5 piksel padat #c7c7c7;
perataan teks: tengah;
tinggi garis: 20px;
ukuran font: 12px;
berat font: tebal;
indeks-z:999;
lebar: 500 piksel;
tinggi: 300 piksel;
kiri:50%;
atas:50%;
margin-left:-150px!important;/*FF IE7 nilai ini adalah setengah dari lebarnya*/
margin-top:-60px!important;/*FF IE7 Nilai ini setengah dari tingginya*/
margin-atas:0px;
posisi:tetap!penting;/* FF IE7*/
posisi: mutlak;/*IE6*/
_top: ekspresi(eval(document.compatMode &&
dokumen.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg,.popIframe {
warna latar: #666; tampilan:tidak ada;
lebar: 100%;
tinggi: 100%;
kiri:0;
teratas:20%;/*FF IE7*/
filter:alfa(opasitas=50);/*IE*/
opacity:0,5;/*FF*/
indeks-z:1;
posisi: tetap!penting;/*FF IE7*/
posisi: mutlak;/*IE6*/
_top: ekspresi(eval(document.compatMode &&
dokumen.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/* www.VeVB.COM IE5 IE5.5*/
}
-->
</gaya>
<skrip>
fungsi showDiv(tag,tid,NamaPengacara){
var light1=dokumen.getElementById(tag);
light1.style.display='blok';
document.getElementById('bg').style.display='blok';
}
fungsi closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='tidak ada';
}
</skrip>
<TUBUH>
<div id="popDiv" style="display:none;">
<pra>
Kuil Bunga Persik (kutipan oleh Zhang Xiaosi)
Ada Kuil Bunga Persik di Taohuawu, dan Peri Bunga Persik di bawah Kuil Bunga Persik.
Peri Bunga Persik menanam pohon persik dan memetik bunga persik dengan imbalan uang anggur.
Ketika saya sadar, saya hanya duduk di depan bunga; ketika saya mabuk, saya tidur di bawah bunga.
Mabuk dan mabuk, kita bangun hari demi hari, dan bunga bermekaran dan gugur tahun demi tahun.
Saya berharap saya bisa mati di usia tua dan menghabiskan waktu saya dengan minum anggur, daripada membungkuk di depan kereta saya.
Mobil, debu, dan kuda cukup untuk orang kaya, dan gelas anggur serta ranting-ranting cukup untuk orang miskin.
Jika orang kaya dan orang mulia diibaratkan dengan orang miskin dan orang rendahan, maka yang satu di bumi dan yang lain di langit.
Jika bunga dan anggur dibandingkan dengan kereta dan kuda, dia harus mengemudi dan saya tidak melakukan apa pun.
Orang lain menertawakan saya karena gila, tetapi saya menertawakan orang lain karena mereka tidak dapat memahaminya.
Tidak ada makam pahlawan dari Lima Makam, dan tidak ada bunga atau anggur untuk mengolah ladang.
</pra>
<a href="javascript:closeDiv()" >Tutup</a>
</div>
<div id="bg" style="display:none;z-index:100;"></div>
<br/><br/><br/><br/><br/><br/><br/>
<a href="javascript:showDiv('popDiv')" style="font-size:20px;margin-left:100px">Muncul</a>
</BODI>
</HTML>