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

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

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

HTML

<p><a href="#modal" class="show-modal">แสดงข้อมูล</a></p>
<article id="modal" class="hide">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>Sed ut perspiciatis unde omnis iste natus error sit ...</p>
   <p><a href="#" class="hide-modal">ปิด</a></p>
</article>

CSS

.hide { display: none; }
.active { display: block;}
.show-modal { margin: auto 1.2em;}
.show-modal, .hide-modal {
	display: block;
	line-height: 2.6em;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
}
.show-modal { background-color: #6BD289;}
.hide-modal { background-color: #D76466;}
[id="modal"] {
	top: 0;
	bottom: 0;
	position: fixed;
	padding: 1.2em;
	box-sizing: border-box;
	z-index: 1;
}
[id="modal"]:before, [id="modal"]:after {
	content: ' ';
	display: block;
}
[id="modal"]:before {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.8);
	z-index: -1;
}
[id="modal"]:after {
	position: absolute;
	background-color: #fff;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}
@media screen and (min-width: 720px) {
	.show-modal, .hide-modal {
		width: 200px;
		margin: 0 auto;
	}
	[id="modal"] {
		top: 40px;
		bottom: auto;
		width: 600px;
		left: 50%;
		margin-left: -300px;
	}
}

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

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

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