imkopkap

สร้าง Modal Popup ด้วย HTML และ CSS

ใช้เวลา 15 นาที 30/11/2014

Modal คืออะไร?

Modal จะมีลักษณะรูปร่างคล้ายๆกับ Popup โดยเจ้าตัว Popup เองนิยมมากๆ สำหรับเว็บที่ต้องการให้มีข้อความ มีรูปภาพโชว์ตอนเข้าหน้าเว็บแรก หรือ มีไว้ตอนคลิกรูปภาพแล้วให้รูปภาพมันใหญ่ขึ้น หรืออีกชื่อหนึ่งก็คือ lighbox ครับ

 

แต่ว่าโดยปกติทั่วไปแล้วจะใช้ JQuery หรือ Javascript เข้ามาช่วยแทรกสอดเพิ่มเติม เพื่อให้มีลูกเล่นที่โดดเด่นในหน้าเว็บกลายเป็น Popup เด้งขึ้นมา แต่อาจจะเป็นปัญหาอย่างหนึ่ง นั่นก็คือ การทำให้หน้าเว็บของเรามีการโหลดช้ามากขึ้นตามไปด้วย

 

สร้าง Modal ด้วย HTML และ CSS ยังไง?

สำหรับการสร้างแล้วไม่ยากเลยครับ โดยเราแค่ใช้ Selector ของ CSS ที่ชื่อว่า :target เข้าช่วย เพียงเท่านี้ก็จะสามารถทำ Popup แบบเบาๆไม่หนักเว็บได้แล้วครับ เพียงแต่ว่าเราต้องไปประยุกต์ใช้แค่นั้นเอง อ่านวิธีการใช้

 

Selector target คืออะไร?

เมื่อเราทำการคลิกที่ลิ้งแท็ก <a> เพื่อไปยัง ID หรือ Class ตัวใดตัวหนึ่ง แล้ว ID และ Class ตัวนั้นได้กำหนด CSS เป็น :target ไว้ก็ให้มันแสดงผลตามที่กำหนดไว้ใน :target สรุปง่ายๆก็คือ ผลการแสดงหลังจากเราคลิกแท็ก <a> ไปเรียบร้อยแล้ว

 

ตัวอย่างโค้ดการแสดงผล

ขั้นตอนการทำ Modal Popup

ในที่นี้แก๊ปจะทำเป็น Popup โชว์บทความนะครับ เพื่อที่ว่าจะได้ง่ายๆ ต่อการอธิบายไม่ซับซ้อนจนเกินไป

1. ให้สร้าง HTML สำหรับ Popup เสียก่อนครับ

<div class="crop">
  <ul>
    <li><a href="#content1" class="click">Section 1</a></li>
    <li><a href="#content2" class="click">Section 2</a></li>
  </ul>
</div>

<div id="content1">
  <h1>Section 1</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <div class="closex">
    <a href="#" class="close">x</a>
  </div>
</div>

<div id="content2">
  <h1>Section 2</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <div class="closex">
    <a href="#" class="close">x</a>
  </div>
</div>

บรรทัดที่ 3 และ 4

เมื่อเราคลิก ให้มันเด้ง Popup ที่มีแท็ก id เป็น content1 และ content2 ขึ้นมา

บรรทัดที่ 8 

กำหนดให้มี id เป็น content1 เมื่อเราทำการคลิกที่ Section1  เรียบร้อยแล้ว จะแสดง popup ข้อความขึ้นมา

บรรทัดที่ 16

กำหนดให้มี id เป็น content2 เมื่อเราทำการคลิกที่ Section2 เรียบร้อยแล้ว จะแสดง popup ข้อความขึ้นมา

บรรทัดที่ 12 และ 20 

สร้างขึ้นมาเพื่อปิด Popup

 

2. กำหนด CSS

โดยเราจะใช้ :target เป็นตัวทำให้ popup เด้งขึ้นมา

body ,p ,a{
 margin:0;
 padding:0;
 overflow:hidden;
 font-family: monospace;
 background-color:#34495e;
 text-decoration:none;
}
.crop {
  position:absolute;
  top:50%;
  left:40%;
  margin:-60px 0 0 -60px;
  z-index:2;
}
ul {
  list-style:none;
}
li {
  margin-bottom:50px;
}
li .click {
  background-color:#3498db;
  color:#fff;
  padding:20px 40px;
  border-bottom:5px solid #2980b9;
  transition:all 0.2s ease-in-out;
}
li .click:hover {
  background-color:#2980b9;
}
.click:active {
-webkit-box-shadow: inset 1px 2px 19px -10px rgba(0,0,0,0.75);
-moz-box-shadow: inset 1px 2px 19px -10px rgba(0,0,0,0.75);
box-shadow: inset 1px 2px 19px -10px rgba(0,0,0,0.75);
}

#content1 ,#content2 {
  color:#fff;
  background-color:#34495e;
  padding:50px;
  height:100%;
  position:absolute;
  z-index:1;
  opacity:0;
  -weblit-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}
#content1:target , #content2:target {
  opacity:1;
  z-index:3;
}
.closex {
  text-align:center;
  position: relative;
  top: 50px;
}
.closex .close {
  color:#fff;
}

บรรทัดที่ 38-50

กำหนดให้ Popup ของเรามองไม่เห็น

บรรทัดที่ 51-53

เมื่อได้ทำการคลิกแท็ก a เรียบร้อยแล้วให้ ID ของ content1 และ content2 โชว์ popup ขึ้นมา

บันทึกแนะนำ