การสร้าง Modal โดยไม่ใช้ JavaScript

Nuttavut Thongjor

22 ส.ค. 2021

โดยปกตินั้นการจะสร้าง Modal เพื่อเด้งดึงโผล่พรวดกลางหน้าจอเราจำเป็นต้องใช้ JavaScript เข้าจัดการ แต่สำหรับบทความนี้เราจะสร้าง Modal แบบง่าย ๆ โดยไม่ต้องใช้ JavaScript หากแต่ใช้เพียงแค่ CSS pseudo-class ที่ชื่อว่า :target เพียงเท่านั้น

:target คืออะไร

:target เป็น CSS pseudo-class ที่ใช้สื่อถึงอีลีเมนต์ปัจจุบันที่มี ID ตรงกับค่าแฮช (URL's fragment) บน URL ตัวอย่างเช่น เมื่อกำหนดให้ HTML ของเหล่าอีลีเมนต์มีค่า ID ดังต่อไปนี้

HTML

1<div id="elem-1">DIV 1</div>
2<div id="elem-2">DIV 2</div>
3<div id="elem-3">DIV 3</div>

ต่อมาเราเขียน CSS ให้อีลีเมนต์ใด ๆ ที่เป็น target element ต้องมีพื้นหลังเป็นสีแดงในขณะที่สีอักษรเป็นสีขาว

CSS

1div:target {
2  background-color: red;
3  color: #fff;
4}

เมื่อเราทำการระบุ URL เป็น http://example.com/index.html#elem-2 ที่มีค่าแฮชเป็น elem-2 จึงเป็นการระบุให้เบราว์เซอร์ทราบว่า เรากำลังกำหนดให้อีลีเมนต์ที่มี ID เป็น elem-2 เป็น target element ด้วยเหตุนี้ div ดังกล่าวจึงถูกกำหนดค่าสีพื้นหลังและอักษรเป็นค่าตามระบุ

การสร้าง Modal ด้วย :target

อาศัยความจริงที่ว่าเมื่อแฮชเปลี่ยนค่า อีลีเมนต์ที่มี ID ตรงกับค่าแฮชดังกล่าวจะเป็น target element นั่นทำให้ส่วนของ CSS คือ :target ถูกปลุกชีพขึ้นมาทำงาน เราจึงใช้ความจริงข้อนี้ในการสร้างแท็ก a ให้เป็นปุ่มกดเพื่อเปิด Modal ได้ ปุ่มดังกล่าวจะระบุค่า href เป็นค่าแฮชที่เราต้องการให้เป็นค่า ID ของ Modal

HTML

1<div class="container">
2  <a href="#modal">Open Modal</a>
3</div>

โค้ดข้างต้นเมื่อทำการกดปุ่ม อีลีเมนต์ที่มี ID เป็น modal จะถือเป็น target element เราจึงสร้างส่วนของ Modal ต่อไปดังนี้

HTML

1<div id="modal" class="modal">
2  <div class="modal-content">
3    <h1>My Modal</h1>
4    <p>
5      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
6      Lorem Ipsum has been the industry's standard dummy text ever since the
7      1500s, when an unknown printer took a galley of type and scrambled it to
8      make a type specimen book.
9    </p>
10  </div>
11</div>

ส่วนของ Modal นั้นหากยังไม่ถูกเปิด (ยังไม่เปิด target element) เราจะซ่อนการแสดงผลด้วย CSS และเปิดเผยการแสดงผลเมื่อเป็น target element ด้วยการระบุ :target

CSS

1.modal {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  visibility: hidden;
6  position: absolute;
7  top: 0;
8  right: 0;
9  bottom: 0;
10  left: 0;
11  opacity: 0;
12  background: rgba(77, 77, 77, 0.7);
13  transition: all 0.4s;
14}
15
16.modal:target {
17  visibility: visible;
18  opacity: 1;
19}

ตอนนี้เมื่อเราทำการกดปุ่มเพื่อเปิด Modal เราก็จะได้หน้าตา Modal เด้งดึงอันสวยงามของเราแล้ว

สร้างปุ่มสำหรับปิด Modal

แต่ตอนนี้ Modal ของเรายังไม่สามารถปิดได้ เราจึงทำการสร้างปุ่มสำหรับปิด Modal ขึ้นมาจากแท็ก a โดยกำหนดค่าของ href เป็น # เพื่อกำจัดค่าแฮชออกไปเป็นผลให้ไม่มี target element อีกต่อไปนั่นเอง

HTML

1<div id="modal" class="modal">
2  <div class="modal-content">
3    <h1>My Modal</h1>
4    <p>
5      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
6      Lorem Ipsum has been the industry's standard dummy text ever since the
7      1500s, when an unknown printer took a galley of type and scrambled it to
8      make a type specimen book.
9    </p>
10    <a href="#" class="close-modal">&times;</a>
11  </div>
12</div>

รวมโค้ดทั้งหมด

ผู้อ่านสามารถทดลองผลลัพธ์ด้วยตนเองได้จาก codepen นี้เลยครับ

โค้ดทั้งหมดสำหรับการสร้าง Modal ด้วย :target เป็นดังนี้

HTML

1<style>
2  .container {
3    display: flex;
4    align-items: center;
5    justify-content: center;
6    height: 100vh;
7    background-image: linear-gradient(
8      to right top,
9      #f61414,
10      #ff003f,
11      #ff0064,
12      #fa0087,
13      #eb12a8
14    );
15  }
16
17  a {
18    color: #666;
19    background-color: #fff;
20    padding: 0.75rem 1rem;
21    border-radius: 5px;
22    text-decoration: none;
23    text-transform: uppercase;
24  }
25
26  .modal {
27    display: flex;
28    align-items: center;
29    justify-content: center;
30    visibility: hidden;
31    position: absolute;
32    top: 0;
33    right: 0;
34    bottom: 0;
35    left: 0;
36    opacity: 0;
37    background: rgba(77, 77, 77, 0.7);
38    transition: all 0.4s;
39  }
40
41  .modal:target {
42    visibility: visible;
43    opacity: 1;
44  }
45
46  .modal-content {
47    position: relative;
48    width: 500px;
49    padding: 1rem;
50    background: #fff;
51    border-radius: 5px;
52  }
53
54  .close-modal {
55    position: absolute;
56    top: 5px;
57    right: 5px;
58  }
59</style>
60
61<html>
62  <body>
63    <div class="container">
64      <a href="#modal">Open Modal</a>
65    </div>
66
67    <div id="modal" class="modal">
68      <div class="modal-content">
69        <h1>My Modal</h1>
70        <p>
71          Lorem Ipsum is simply dummy text of the printing and typesetting
72          industry. Lorem Ipsum has been the industry's standard dummy text ever
73          since the 1500s, when an unknown printer took a galley of type and
74          scrambled it to make a type specimen book.
75        </p>
76        <a href="#" class="close-modal">&times;</a>
77      </div>
78    </div>
79  </body>
80</html>

สารบัญ

:target คืออะไร
การสร้าง Modal ด้วย :target
สร้างปุ่มสำหรับปิด Modal
รวมโค้ดทั้งหมด

การสร้าง Modal โดยไม่ใช้ JavaScript

:target คืออะไร

การสร้าง Modal ด้วย :target

สร้างปุ่มสำหรับปิด Modal

รวมโค้ดทั้งหมด

สารบัญ

คอร์สออนไลน์ของเรา

คอร์สออนไลน์สอนการใช้งาน Cypress เพื่อทดสอบเว็บแอพพลิเคชันแบบ automated testing

คอร์สออนไลน์สอนการใช้งาน TypeScript ตั้งแต่เริ่มต้นถึงขั้นสูง

คอร์สออนไลน์สอนสร้าง RESTful API ด้วยภาษา Go (Golang) และ Gin พร้อม Workshop