สร้างการแจ้งเตือนด้วย PopUp ด้วย jQuery Notify

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: สร้างการแจ้งเตือนด้วย PopUp ด้วย jQuery Notify

สร้างการแจ้งเตือนด้วย PopUp ด้วย jQuery Notify

โดย Ik Kat » 30/06/2017 1:27 pm

การใช้ PopUp แจ้งเตือนในปัจจุบันมีหลาหลายรูปแบบมากพอสมควร ไม่ว่าจะเป็นแจ้งเตือนข้อมูลข่าวสารต่าง ๆ หรือแม้กระทั่งการแจ้งเพื่อการโฆษณา ซึ่งในวันนี้เราจะมาแนะนำการสร้าง PopUp ด้วย jQuery โดยในปัจจุบันก็ได้มีการพัฒนามาจนถึงเวอร์ชั่นที่ 3.2.1 แล้ว

รูปภาพ
index.php :

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<meta charset=utf-8 />
<title>jQuery Notify</title>
</head>
<body> 
<center>
    <script>
        $(document).ready(function () {
            $('#p').click(function () {
                notify();
            });
        }); 
      
function notify() {
  if (!Notification) {
    alert('Notifications are supported in modern versions of Chrome, Firefox, Opera 

and Firefox.'); 
    return;
  }

  if (Notification.permission !== "granted"){
    Notification.requestPermission();
  }
    
  var notification = new Nfication("ยินดีต้อนรับค่ะ", { //หัวข้อ
    icon: "https://www.mindphp.com/forums/images/avatars/gallery/gallery/tn10.gif",//รูป
    body: ".............................ทำสอบสร้างการแจ้งเตือนด้วย Popup.............................",//คำอธิบาย
  });

  notification.onclick = function () {
    window.open("#");      
  };
	setTimeout(function () { 
				notification.cancel();
			}, '1000'); //ตั้งเวลาปิด
}
      
    </script>
    <h1 id="p">กดปุ่มเพื่อแสดง POPUP</h1>
    <button onClick='notify()'>แสดง Popup</button>
</center>
</body>
</html>
รูปภาพ

จากตัวอย่างด้านบน เรามาอธิบายในแต่ล่ะส่วนกันค่ะ
  • เป็นการเรียกใช้ jquery :

โค้ด: เลือกทั้งหมด

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

โค้ด: เลือกทั้งหมด

        $(document).ready(function () {
            $('#p').click(function () {
                notify();
            });
        }); 
      
  • เป็นในส่วนของข้อความใน popup :

โค้ด: เลือกทั้งหมด

  var notification = new Notification("ยินดีต้อนรับ", { //หัวข้อ
    icon: "https://www.mindphp.com/forums/images/avatars/gallery/gallery/tn10.gif",//รูป
    body: ".............................ทำสอบสร้างการแจ้งเตือนด้วย Popup.............................",//คำอธิบาย
  });
  • การตั้งเวลาให้ปิด popup :

โค้ด: เลือกทั้งหมด

setTimeout(function () { 
				notification.cancel();
			}, '1000'); //ตั้งเวลาปิด
}

ข้างบน