content #3

#พื้นฐานการเขียนเว็ปไซต์

#appscript

#google

1. โครงสร้าง HTML (The HTML Structure)

ขั้นแรกสร้างโครงสร้างพื้นฐานในไฟล์ HTML ของคุณ โดยประกอบด้วย 2 ส่วนหลักๆ คือ ปุ่มสำหรับเปิด/ปิด และ ตัวกล่อง Modal เอง

HTML

<div class="toggle-container">

<input type="checkbox" id="modal-toggle" class="modal-toggle">

<label for="modal-toggle" class="toggle-button">

เปิด Modal

</label>

<div class="modal">

<div class="modal-content">

<label for="modal-toggle" class="close-button">

&times;

</label>

<h2>นี่คือ Modal ของคุณ</h2>

<p>คุณสามารถใส่เนื้อหาอะไรก็ได้ที่นี่...</p>

</div>

</div>

</div>

• <input type="checkbox"> : นี่คือ กุญแจสำคัญ ของเทคนิคนี้ เราจะใช้สถานะ checked หรือ unchecked ของ Checkbox เป็นตัวควบคุมการแสดงผลของ Modal

• <label> : ใช้สำหรับเชื่อมต่อกับ input โดยใช้แอตทริบิวต์ for ที่มีค่าตรงกับ id ของ input เมื่อคลิกที่ <label> จะทำให้ Checkbox ถูก checked หรือ unchecked

• <div class="modal"> : คือตัวกล่อง Modal ที่เราจะซ่อนไว้ตอนแรก

2. การจัดการ CSS (The CSS Magic)

ในส่วนของ CSS เราจะใช้ตัวเลือกแบบพิเศษ (pseudo-classes) และตัวเลือกแบบ sibling combinator เพื่อควบคุมการแสดงผลของ Modal

CSS

/* ซ่อน Checkbox จริงๆ ไว้ */

.modal-toggle {

display: none;

}

/* ตั้งค่าเริ่มต้นของ Modal ให้ซ่อนอยู่ */

.modal {

visibility: hidden;

opacity: 0;

transition: visibility 0s, opacity 0.5s; /* ทำให้เกิดเอฟเฟกต์ Fade-in/out */

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5); /* พื้นหลังทึบแสง */

display: flex;

justify-content: center;

align-items: center;

}

/* เมื่อ Checkbox ถูกเลือก (checked) ให้แสดง Modal */

.modal-toggle:checked ~ .modal {

visibility: visible;

opacity: 1;

}

/* ตกแต่งส่วนอื่นๆ ตามต้องการ */

.modal-content {

background-color: #fff ;

padding: 20px;

border-radius: 8px;

width: 80%;

max-width: 500px;

position: relative;

transform: translateY(-20px);

transition: transform 0.5s ease-out;

}

.modal-toggle:checked ~ .modal .modal-content {

transform: translateY(0);

}

.close-button {

position: absolute;

top: 10px;

right: 15px;

font-size: 24px;

cursor: pointer;

color: #aaa ;

}

.toggle-button {

cursor: pointer;

padding: 10px 20px;

background-color: #007bff ;

color: white;

border-radius: 5px;

text-decoration: none;

display: inline-block;

}

• .modal-toggle:checked : นี่คือ หัวใจ ของกลไกทั้งหมด เมื่อ Checkbox ถูกคลิกจนมีสถานะ checked

• ~ (General Sibling Combinator) : ตัวเลือกนี้จะเลือกองค์ประกอบ .modal ที่อยู่ ถัดจาก องค์ประกอบ .modal-toggle:checked ในระดับเดียวกัน

• visibility: visible; และ opacity: 1; : เมื่อเงื่อนไขด้านบนเป็นจริง เราจะเปลี่ยนคุณสมบัติเหล่านี้เพื่อทำให้ Modal ที่ซ่อนอยู่แสดงขึ้นมา

สรุปการทำงาน

เมื่อผู้ใช้คลิกที่ปุ่ม "เปิด Modal" ซึ่งจริงๆ แล้วคือ <label> จะทำให้ <input type="checkbox" id="modal-toggle"> เปลี่ยนสถานะเป็น checked เมื่อ <input> มีสถานะ checked จะเกิดการทำงานของ CSS Selector .modal-toggle:checked ~ .modal ทำให้ Modal ที่เคยถูกซ่อนไว้ปรากฏขึ้น เมื่อคลิกที่ปุ่ม "×" (ปุ่มปิด) ซึ่งเป็น <label> ที่ชี้กลับไปที่ <input> อีกครั้ง ก็จะทำให้ <input> เปลี่ยนสถานะกลับเป็น unchecked ทำให้ Modal ซ่อนลงไปอีกครั้ง