ทำ Modal เล่นๆ ไม่ต้องใช้ JavaScript ก็ทำได้!

กลับมาอีกครั้งกับ Frontend Trick #2 วันนี้จะมาเล่าวีธีการสร้าง Modal มาใช้เองในเว็บของเราแบบง่ายๆ โดยใช้แค่ CSS เพียงอย่างเดียว ไม่ต้องพึ่ง Javascript เลย

Modal คืออะไร?

สำหรับใครที่ยังไม่รู้จัก Modal คือ กล่องที่แสดงขึ้นมาทับหน้าเว็บไซต์ของเราอีกที เพื่อแสดงข้อมูลต่าง ๆ หรือให้ทำ action บางอย่าง ตัวอย่างเช่น

ซึ่งวิธีการจะสร้าง Modal มาใช้ในเว็บของเรานั้นสามารถทำได้หลายวิธี เช่น การเอา component จาก Framework ต่างๆ เช่น Bootstrap มาใช้ในเว็บของเรา

https://getbootstrap.com/docs/4.0/components/modal/

ถ้าลองเข้าไปดูวิธีทำจะเห็นว่าเราจะต้องใช้ Library ช่วยหลายอย่าง ทั้ง Bootstrap และ JQuery ซึ่งถ้าเราต้องการแค่ Modal มาใส่ในเว็บ การหา Framework มาใช้อาจจะทำให้ยุ่งยากเกินไป

จริง ๆ แล้วการทำ Modal ไม่ได้ยากอย่างที่คิด วันนี้จะมาลองทำให้ดูว่ามันทำง่ายขนาดไหน มาดูกันเลยย

ขั้นแรกเราสร้าง HTML ขึ้นมา สร้าง input type="checkbox" โดยสิ่งนี้จะทำหน้าที่เป็นตัวกำหนด state ในการเปิดและปิด Modal โดยเราจะใส่ logic ให้แสดง Modal เมื่อ input นี้โดนติ๊ก และปิดเมื่อยกเลิกติ๊ก เดี๋ยวจะอธิบายวิธีการทำในลำดับต่อไป

<section>
    <input type="checkbox" id="click" style="display: none;">
    <label for="click" class="button">
        <a class="button-launch">Click to launch modal</a>
    </label>
</section>

และมี label เป็นพระเอกของเรานี้เอง โดยเราจะผูก label กับ input ไว้ด้วยกันโดยผ่าน for ของ label และ id ของ input จะต้องเป็นค่าเดียวกัน ในที่นี้เราให้ for="click" และ id="click" เป็นคำว่า click เหมือนกัน
การทำแบบนี้จะทำให้ เวลาเราคลิกของใน label จะส่งผลต่อ input ที่เป็นชื่อเดียวกันด้วย ทำให้เราสามารถติ๊กและยกเลิกติ๊กผ่านที่อื่นได้นอกจากตัว input ส่งผลให้เราสามารถซ่อนตัว input นี้ไปได้ โดยการใส่ style="display: none;"

ตกแต่งปุ่มที่อยู่ใน label ของเราให้สวยงามตามใจชอบ

ต่อไปเป็นการสร้าง HTML ที่จะนำมาเป็น Modal กัน

<div class="modal">
  <div class="model__content">
    <p>Hello World</p>
  </div>
  <label for="click"  class="button">
      <a class="button-close">CLOSE</a>
  </label>
</div>
<div class="overlay"></div>

Modal ที่เราสร้างขึ้นมาจะประกอบไปด้วยสองส่วน คือ ส่วน content ใน Modal และส่วนที่เป็น overlay ที่จะเป็นเหมือนพื้นหลังของ Modal อีกที
โดยใน Modal เราจะใส่ปุ่มชื่อ CLOSE เอาไว้ข้างใน และครอบด้วย label ที่มี for="click" เหมือนกัน เพื่อทำให้มีความสามารถในการยกเลิก input checkbox ที่เราเตรียมไว้ข้างต้น

ใส่ style ให้กับ overlay และตัว Modal ได้ตามใจชอบ

.overlay {
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
}
.modal {
  background-color: #fff;
  border-radius: 15px;
  width: 100%;
  max-width: 540px;
  padding-bottom: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
}

จากตัวอย่าง CSS ด้านบน เราจะให้ตัว .overlay และ .modal มี opacity: 0 เพื่อซ่อน modal และ overlay ให้หายไปตอนเราเข้าเว็บมา และใส่ pointer-events: none เพื่อทำให้ modal และ overlay ไม่ไปบังหน้าเว็บของเรา จริง ๆ แล้วเราสามารถซ่อน modal และ overlay ด้วยวิธีการอื่น ๆ ก็ได้ เช่น การใช้ display: none ตามถนัด แต่จากตัวอย่างจะใช้วิธีลด opacity เพื่อให้ทำสามารถใส่ Transition ให้มันค่อย ๆ แสดงขึ้นมาได้

สุดท้ายเราจะใส่ style ให้กับ .modal และ .overlay ตอนที่ input โดนติ๊ก (checked) ให้เปลี่ยน opacity: 1 และเปลี่ยน pointer-events: auto เพื่อแสดง Modal ขึ้นมาบนหน้าเว็บ

input[type="checkbox"]:checked ~ .modal {
  pointer-events: auto;
  opacity: 1;
}
input[type="checkbox"]:checked ~ .overlay {
  pointer-events: auto;
  opacity: 0.75;
}

จากโค๊ดตัวอย่างก็จะได้ Modal มาเรียบร้อย

สามารถตกแต่ง modal ให้สวยงามเต็มที่ตามต้องการ ทีนี้ก็จะได้ Modal สวย ๆ มาใช้ในเว็บของเราแล้ว
อยากดู Modal แบบสมบูรณ์สามารถลองเล่นดูได้ที่นี่ 👇https://nueymoo.github.io/modal-window-css/

จริง ๆ การทำ Modal ก็ไม่ได้ยากอย่างที่คิดแค่ HTML และ CSS เล็กน้อยก็สามารถทำได้แล้ว ไม่จำเป็นต้องไปตามหา Modal จากใน Framework ต่าง ๆ ให้ยุ่งยากเลยย

สามารถอ่าน Source code แบบเต็มๆได้ 👉 ที่นี่

ถ้าใครชอบก็อย่าลืมกดติดตาม Code’s Dairy เพื่อจะได้ไม่พลาด Content ใหม่ ๆ ของเราด้วยน้า ♡

Code's Diary

🔅 Frontend Trick #1 Toggle Switch CSS Only