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

<!doctype html>


 
    ตัวอย่าง popup
<!-- สามารถไปดาวน์โหลดมาไว้ใน server ได้เลย -->
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />


  <!-- นับเวลาถอยหลัง -->
  <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:"1045px", height:"620px", href: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHlkdkOWJDSxDsRpW_jJExZe5EY81KD4YYMCL4CYsfPlrGdvAp9g61lFA84sRjIkYF5Zn4Fw8K-moJkakeGEceWK_R8qE2Ad6aYeRtvfhNp1AtziQzFjMH-8BwQijdfR6l5tEaCw00O4/s1600/Queen1000.jpg"});
      }
   
      function countDown(){
        seconds--
        $("#seconds").text(seconds);
        if (seconds === 0){
          openColorBox();
          clearInterval(i);
        }
      }
      //กำหนดเวลา วินาทีที่จะให้ popup ทำงาน
      var seconds = 2,
          i = setInterval(countDown, 1000);
    </script>

</!doctype>



คัดลอกโค้ดข้างบนวางในหน้าแรก

Share: