ใน workshop นี้จะแนะนำวิธีการทำ popup หน้าเว็บแบบง่ายๆนะครับ สามารถทำ popup แสดงหน้าเว็บก็ได้ หรือแสดงรุปภาพก็ได้เช่นเดียวกัน code ก็สั้นๆ ครับ เพราะเน้น link ไป css, jQuery ที่เว็บอื่นๆ และสามารถแก้ไขปรับแต่งได้ตามที่เราต้องการเลยครับ
ตัวอย่าง code & script
<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"></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:"400px", height:"400px", href: "http://www.hongpakkroo.com/"});
}
function countDown(){
seconds--
$("#seconds").text(seconds);
if (seconds === 0){
openColorBox();
clearInterval(i);
}
}
//กำหนดเวลา วินาทีที่จะให้ popup ทำงาน
var seconds = 2,
i = setInterval(countDown, 1000);
</script>
</body>
|