ในบทที่แล้ว ฉันแนะนำว่าคุณสามารถเพิ่มโมดูลการแก้ไขพื้นที่บางส่วนลงในหน้าที่มาสก์ได้ ในบทนี้ ฉันจะแนะนำหน้าหลักเพื่อแสดงเลเยอร์มาสก์และป๊อปอัปกล่องโต้ตอบแบบกึ่งโปร่งใส Dialog คือหน้าย่อยป๊อปอัป div
การเรนเดอร์มีดังนี้:
การใช้งานโค้ดเฉพาะมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<หัว>
<TITLE> เอกสารใหม่ </TITLE>
<META NAME="เครื่องกำเนิดไฟฟ้า" CONTENT="แก้ไขพลัส">
<META NAME="ผู้เขียน" เนื้อหา="">
<META NAME="คำหลัก" เนื้อหา="">
<META NAME="คำอธิบาย" เนื้อหา="">
</HEAD>
<style type="text/css">
-
.mydiv {
สีพื้นหลัง: #FFFFFF;
เส้นขอบ: 5px ทึบ #c7c7c7;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูงของบรรทัด: 20px;
ขนาดตัวอักษร: 12px;
น้ำหนักตัวอักษร: ตัวหนา;
ดัชนี z:999;
ความกว้าง: 500px;
ความสูง: 300px;
ซ้าย:50%;
ด้านบน:50%;
ขอบซ้าย:-150px!important;/*FF IE7 ค่านี้คือครึ่งหนึ่งของความกว้างของตัวเอง*/
Margin-top:-60px!important;/*FF IE7 ค่านี้คือครึ่งหนึ่งของความสูง*/
ขอบด้านบน: 0px;
ตำแหน่ง:คงที่!สำคัญ;/* FF IE7*/
ตำแหน่ง:สัมบูรณ์;/*IE6*/
_top: การแสดงออก (eval (document.compatMode &&
document.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 {
สีพื้นหลัง: #666; จอแสดงผล: ไม่มี;
ความกว้าง: 100%;
ความสูง: 100%;
ซ้าย:0;
บนสุด:20%;/*FF IE7*/
ตัวกรอง:อัลฟ่า(ความทึบ=50);/*IE*/
ความทึบ:0.5;/*FF*/
ดัชนี z:1;
ตำแหน่ง:คงที่!สำคัญ;/*FF IE7*/
ตำแหน่ง:สัมบูรณ์;/*IE6*/
_top: การแสดงออก (eval (document.compatMode &&
document.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*/
-
-
</สไตล์>
<สคริปต์>
ฟังก์ชั่น showDiv (แท็ก, tid, ชื่อทนายความ) {
var light1=document.getElementById(แท็ก);
light1.style.display='บล็อก';
document.getElementById('bg').style.display='block';
-
ฟังก์ชั่น closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
-
</สคริปต์>
<ร่างกาย>
<div id="popDiv" style="display:none;">
<ก่อน>
วัดดอกท้อ (คัดลอกโดย จาง เซียวซี)
มีวัดดอกท้อในเถาหัวหวู่ และมีนางฟ้าดอกท้ออยู่ใต้วัดดอกท้อ
นางฟ้าดอกพีชปลูกต้นพีชและเก็บดอกพีชเพื่อแลกกับเงินไวน์
เมื่อฉันเงียบขรึมฉันก็นั่งอยู่หน้าดอกไม้ เมื่อฉันเมาฉันก็มานอนใต้ดอกไม้
เราเมาและเมามาย เราตื่นขึ้นมาวันแล้ววันเล่า ดอกไม้บานและร่วงหล่นปีแล้วปีเล่า
ฉันหวังว่าฉันจะตายในวัยชราและใช้เวลาดื่มไวน์แทนที่จะโค้งคำนับหน้ารถม้า
รถ ฝุ่น และม้าก็เพียงพอสำหรับคนรวย ถ้วยไวน์และกิ่งไม้ก็เพียงพอสำหรับคนยากจน
หากเปรียบเทียบคนรวยและคนสูงศักดิ์กับคนจนและคนถ่อมตัว คนหนึ่งอยู่บนพื้นดินและอีกคนอยู่บนท้องฟ้า
หากเปรียบดอกไม้และเหล้าองุ่นเป็นรถม้าศึกและม้า เขาคงต้องขับรถไป ส่วนข้าก็ไม่มีอะไรทำ
คนอื่นหัวเราะเยาะฉันที่บ้า แต่ฉันหัวเราะคนอื่นเพราะพวกเขามองผ่านมันไม่ได้
ไม่มีสุสานของฮีโร่จาก Five Tombs และไม่มีดอกไม้หรือเหล้าองุ่นให้ปลูกในทุ่ง
</pre>
<a href="javascript:closeDiv()">ปิด</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">ปรากฏ</a>
</ร่างกาย>
</HTML>