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'); //ตั้งเวลาปิด
}