บทนี้แนะนำวิธีการคลิกปุ่มเพื่อปรากฏขึ้นในหน้าต่างที่อยู่ตรงกลางและหน้าต่างนี้มีเอฟเฟกต์การกำบังแบบโปร่งแสง . รหัสที่แนะนำด้านล่างสามารถใช้น้องสาวตัวน้อยนี้ได้
รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "ผู้เขียน" content = "http://www.softwhy.com/"/>
<title> มดเผ่า </title>
<style type = "text/css">
#fade {
แสดง: ไม่มี;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0%;
ซ้าย: 0%;
ความกว้าง: 100%;
ความสูง: 100%;
พื้นหลังสี: ดำ;
z-index: 1001;
-moz-opacity: 0.8;
ความทึบ: .80;
ตัวกรอง: อัลฟ่า (ความทึบ = 80);
-
#แสงสว่าง{
แสดง: ไม่มี;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 25%;
ซ้าย: 25%;
ความกว้าง: 50%;
ความสูง: 50%;
Padding: 16px;
ชายแดน: 3px Solid Orange;
พื้นหลังสี: สีขาว;
z-index: 1002;
ล้น: อัตโนมัติ;
-
</style>
<script type = "text/javascript">
window.onload = function () {
var linkbt = document.getElementById ("linkbt");
var light = document.getElementById ('Light');
var fade = document.getElementById ('fade');
var closebt = document.getElementById ("CloseBt");
linkbt.onclick = function () {
Light.style.display = 'block';
fade.style.display = 'block';
-
closebt.onclick = function () {
Light.style.display = 'ไม่มี';
fade.style.display = 'none';
-
-
</script>
</head>
<body>
<a href = "javascript: void (0)" id = "linkbt"> คลิกที่นี่เพื่อเปิดหน้าต่าง </a>
<div id = "Light"> <a href = "JavaScript: void (0)" id = "closebt"> ปิดหน้าต่าง </a> </div>
<div id = "fade" "> </div>
</body>
</html>
รหัสข้างต้นใช้ข้อกำหนดของเราและต่อไปนี้แนะนำกระบวนการดำเนินการตามสั้น ๆ
1. หลักการดำเนินการ:
โดยค่าเริ่มต้นเลเยอร์หน้ากากและหน้าต่างจะถูกซ่อนอยู่และมองไม่เห็น องค์ประกอบทั้งสองใช้การวางตำแหน่งแบบสัมบูรณ์และตั้งค่าแอตทริบิวต์ z-index ของหน้าต่างศูนย์กลางให้มากกว่าชั้นหน้ากากเพื่อให้สามารถครอบคลุมบนชั้นหน้ากาก เมื่อคลิกปุ่มปิดชั้นหน้ากากและหน้าต่างสามารถซ่อนได้และหลักการก็เหมือนกัน