การสร้าง Modal/Popup ด้วย CSS

การสร้าง Modal/Popup ด้วย CSS

ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการสร้าง Modal หรือ Popup อย่างง่ายด้วย CSS ซึ่งเป็นส่วนประกอบ UI ที่พบเห็นได้บ่อยในเว็บไซต์ต่างๆ Modal มักถูกใช้เพื่อแสดงข้อมูลเพิ่มเติม, แบบฟอร์ม, หรือข้อความแจ้งเตือน โดยจะปรากฏขึ้นเหนือเนื้อหาหลักของหน้าเว็บและปิดกั้นการโต้ตอบกับเนื้อหาเบื้องหลัง

เราจะเน้นการใช้ CSS ในการควบคุมการแสดงผล Modal โดยใช้คุณสมบัติ position: fixed, z-index, และ visibility เพื่อให้เข้าใจง่ายและนำไปประยุกต์ใช้ได้จริง

โครงสร้าง HTML สำหรับ Modal

เริ่มต้นด้วยการสร้างโครงสร้าง HTML ที่จำเป็นสำหรับ Modal ของเรา โดยทั่วไปแล้ว เราจะใช้ <div> สองตัว: ตัวหนึ่งสำหรับพื้นหลังที่เบลอ (Overlay) และอีกตัวสำหรับเนื้อหาของ Modal

<button id="openModalBtn">เปิด Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>นี่คือเนื้อหาของ Modal!</p>
  </div>
</div>

อธิบายโค้ด:

• <button id="openModalBtn">: ปุ่มที่ใช้เปิด Modal
• <div id="myModal" class="modal">: <div> หลักที่ครอบคลุมทั้ง Modal และ Overlay
• <div class="modal-content">: <div> ที่บรรจุเนื้อหาของ Modal (ข้อความ, ฟอร์ม, ฯลฯ)
• <span class="close">&times;</span>: ปุ่มสำหรับปิด Modal (ใช้สัญลักษณ์ × แทนเครื่องหมาย 'X')

CSS Styling: การจัดรูปแบบ Modal

ตอนนี้เรามาเขียน CSS เพื่อจัดรูปแบบ Modal ให้ปรากฏตามที่เราต้องการ โดยเน้นการใช้ position: fixed, z-index, และ visibility

/* ซ่อน Modal ในตอนเริ่มต้น */
.modal {
  display: none; /* หรือ visibility: hidden; */
  position: fixed; /* กำหนดให้ Modal อยู่คงที่บนหน้าจอ */
  z-index: 1; /* กำหนดลำดับการแสดงผลให้อยู่เหนือเนื้อหาอื่นๆ */
  left: 0;
  top: 0;
  width: 100%; /* ครอบคลุมความกว้างของหน้าจอ */
  height: 100%; /* ครอบคลุมความสูงของหน้าจอ */
  overflow: auto; /* เปิดใช้งาน Scroll หากเนื้อหา Modal ยาวเกินไป */
  background-color: rgba(0,0,0,0.4); /* สีพื้นหลังโปร่งแสงสำหรับ Overlay */
}

/* รูปแบบของ Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* จัดกึ่งกลาง Modal ในแนวตั้งและแนวนอน */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* กำหนดความกว้างของ Modal Content */
}

/* รูปแบบของปุ่มปิด */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* แสดง Modal เมื่อถูกเปิดใช้งาน */
.modal.show {
  display: block; /* หรือ visibility: visible; */
}

อธิบาย CSS:

• .modal:
  • display: none;: ซ่อน Modal ในตอนเริ่มต้น (เราจะเปลี่ยนเป็น block หรือ flex เมื่อต้องการแสดง)
  • position: fixed;: ทำให้ Modal อยู่คงที่ในตำแหน่งเดิมบนหน้าจอ แม้ว่าจะมีการเลื่อนหน้าเว็บ
  • z-index: 1;: กำหนดให้ Modal อยู่เหนือองค์ประกอบอื่นๆ บนหน้าเว็บ หากไม่มี z-index Modal อาจถูกซ่อนอยู่ใต้องค์ประกอบอื่น
  • width: 100%; และ height: 100%;: ครอบคลุมพื้นที่ทั้งหมดของหน้าจอ
  • overflow: auto;: เพิ่ม Scrollbar หากเนื้อหาของ Modal มีขนาดใหญ่เกินกว่าที่จะแสดงผลในหน้าจอ
  • background-color: rgba(0,0,0,0.4);: สร้างพื้นหลังโปร่งแสงสีดำ (Overlay) เพื่อให้ผู้ใช้โฟกัสไปที่ Modal
• .modal-content:
  • background-color: #fefefe;: กำหนดสีพื้นหลังของเนื้อหา Modal
  • margin: 15% auto;: จัดกึ่งกลาง Modal ในแนวตั้ง (ห่างจากด้านบน 15% ของความสูงหน้าจอ) และแนวนอน (auto)
  • padding: 20px;: เพิ่มพื้นที่ว่างรอบๆ เนื้อหา Modal
  • border: 1px solid #888;: เพิ่มเส้นขอบ
  • width: 80%;: กำหนดความกว้างของเนื้อหา Modal
• .close:
  • กำหนดรูปแบบของปุ่มปิด (เครื่องหมาย 'X')
  • cursor: pointer;: เปลี่ยน Cursor เป็นรูปมือเมื่อ Hover เพื่อบอกให้ผู้ใช้รู้ว่าคลิกได้
• .modal.show:
  • display: block;: แสดง Modal เมื่อคลาส .show ถูกเพิ่มเข้าไป (เราจะใช้ JavaScript เพื่อเพิ่มคลาสนี้)

JavaScript: การควบคุมการแสดงผล Modal

เราต้องใช้ JavaScript เล็กน้อยเพื่อควบคุมการแสดงผล Modal เมื่อผู้ใช้คลิกปุ่ม "เปิด Modal" และ "ปิด Modal"

// รับ Element ที่จำเป็น
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
var span = document.getElementsByClassName("close")[0];

// เมื่อคลิกปุ่ม "เปิด Modal"
btn.onclick = function() {
  modal.classList.add("show"); // หรือ modal.style.display = "block";
}

// เมื่อคลิกปุ่มปิด (X)
span.onclick = function() {
  modal.classList.remove("show"); // หรือ modal.style.display = "none";
}

// เมื่อคลิกที่ใดก็ได้นอก Modal Content
window.onclick = function(event) {
  if (event.target == modal) {
    modal.classList.remove("show"); // หรือ modal.style.display = "none";
  }
}

อธิบาย JavaScript:

• เราดึง Elements ที่จำเป็นจาก DOM โดยใช้ document.getElementById() และ document.getElementsByClassName()
• เมื่อคลิกปุ่ม "เปิด Modal" เราจะเพิ่มคลาส .show ให้กับ Modal Element ซึ่งจะทำให้ Modal ปรากฏขึ้น (ตาม CSS ที่เรากำหนดไว้)
• เมื่อคลิกปุ่มปิด (X) หรือคลิกที่ใดก็ได้นอก Modal Content เราจะลบคลาส .show ออกจาก Modal Element ซึ่งจะทำให้ Modal ถูกซ่อน

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

• ปัญหา: Modal ปรากฏอยู่ใต้องค์ประกอบอื่นๆ บนหน้าเว็บ
  • วิธีแก้ไข: ตรวจสอบให้แน่ใจว่า Modal มี z-index ที่สูงกว่าองค์ประกอบอื่นๆ
• ปัญหา: ไม่สามารถเลื่อนเนื้อหาใน Modal ได้เมื่อเนื้อหายาวเกินไป
  • วิธีแก้ไข: ตรวจสอบให้แน่ใจว่า .modal มี overflow: auto;
• ปัญหา: Overlay ไม่ครอบคลุมพื้นที่ทั้งหมดของหน้าจอ
  • วิธีแก้ไข: ตรวจสอบให้แน่ใจว่า .modal มี width: 100%; และ height: 100%;
• กรณีใช้งาน: ใช้ Modal เพื่อแสดงแบบฟอร์ม Login/Register, แสดงรายละเอียดสินค้า, หรือแสดงข้อความแจ้งเตือน

สรุป

ในบทเรียนนี้ เราได้เรียนรู้วิธีการสร้าง Modal/Popup อย่างง่ายด้วย CSS โดยใช้ position: fixed, z-index, และ visibility รวมถึง JavaScript เล็กน้อยเพื่อควบคุมการแสดงผล Modal หวังว่าคุณจะสามารถนำความรู้ที่ได้ไปประยุกต์ใช้ในการสร้างเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพ

ในบทเรียนถัดไป เราจะเรียนรู้เกี่ยวกับการสร้าง Tab Navigation ด้วย CSS