ใน workshop นี้จะแนะนำวิธีการทำ popup หน้าเว็บแบบง่ายๆนะครับ สามารถทำ popup แสดงหน้าเว็บก็ได้ หรือแสดงรุปภาพก็ได้เช่นเดียวกัน code ก็สั้นๆ ครับ เพราะเน้น link ไป css, jQuery ที่เว็บอื่นๆ และสามารถแก้ไขปรับแต่งได้ตามที่เราต้องการเลยครับ
ตัวอย่าง code & script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ตัวอย่าง popup </title> <!-- สามารถไปดาวน์โหลดมาไว้ใน server ได้เลย --> <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" /> </head> <body> <!-- นับเวลาถอยหลัง --> <h1><span id="seconds">2</span></h1> <!--จะโหลดมาไว้ใน server หรือใช้แบบนี้ก็ได้ --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script> <script> function openColorBox(){ //กำหนดขนาดและหน้าเว็บที่จะแสดงใน popup สามารถใส่เป็นภาพก็ได้นะครับ $.colorbox({iframe:true, width:"800px", height:"500px", href: "http://devbanban.com/"}); } function countDown(){ seconds-- $("#seconds").text(seconds); if (seconds === 0){ openColorBox(); clearInterval(i); } } //กำหนดเวลา วินาทีที่จะให้ popup ทำงาน var seconds = 2, i = setInterval(countDown, 1000); </script> </body> </html> |
ตัวอย่าง code ดาวน์โหลดไปใช้ได้เลยครับ
คลิกทดสอบหน้า popup เว็บไซต์ ….