ทำ Popup หน้าเว็บแบบง่ายๆ Website Popup

ใน workshop นี้จะแนะนำวิธีการทำ popup หน้าเว็บแบบง่ายๆนะครับ สามารถทำ popup แสดงหน้าเว็บก็ได้ หรือแสดงรุปภาพก็ได้เช่นเดียวกัน code ก็สั้นๆ ครับ เพราะเน้น link ไป css, jQuery ที่เว็บอื่นๆ และสามารถแก้ไขปรับแต่งได้ตามที่เราต้องการเลยครับ

ตัวอย่าง code & script

<!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>

<!DOCTYPE html>

<html>

<head>

<title>ตัวอย่าง popup </title>

</head>

<body>

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 เว็บไซต์ ….

ทำ Popup หน้าเว็บแบบง่ายๆ Website Popup

Share this: