การทำ Modal window แบบประหยัด Code

วันนี้ผมขอมาไวเครมเร็ว เสนอบทความก้อมอันเนื่องมาจาก หงุดหงิดทุกครั้งเมื่อเห็นคนอื่นเขียน HTML Code ยาวเฟื้อยทั้งๆ ที่มันสามารถเขียนให้สั้นๆ กระชับ ดับโลกร้อนได้ ThaiCSS Direct วันนี้ขอเสนอ “การทำ Modal หรือ Pop up แบบกากๆ” หรือการเรียกใช้ :before และ :after (pseudo-element) ให้เกิดประโยชน์

Modal CSS Code

อาการที่เราต้องการคือ เมื่อเราอยากให้ User กด หรือ Click ที่ปุ่มแล้วแสดงกล่องขึ้นมาทับที่หน้าจอ บดบังทัศนียภาพอื่นๆ ไว้เพื่อกระทำการอะไรสักอย่างนั่นแหละ ผมจะเขียน Code แค่นี้

HTML

CSS

หลักการทั่วไปให้สังเกตตรง [id=”modal”]:before, [id=”modal”]:after รวมถึง z-index ของทั้งสอง

ส่วนโค้ดอื่นๆ ใช้ Dev tool ของ Browser จิ๋มดู “การทำ Modal window แบบประหยัด Code” ได้เลยครับ รวมทั้ง JS กากๆ ด้วย

มีความสุขกับการใช้ชีวิตครับ

Back to Top

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top