การใช้ 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>
จากตัวอย่างด้านบน เรามาอธิบายในแต่ล่ะส่วนกันค่ะ
โค้ด: เลือกทั้งหมด
<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'); //ตั้งเวลาปิด
}
[b]การใช้ PopUp[/b] แจ้งเตือนในปัจจุบันมีหลาหลายรูปแบบมากพอสมควร ไม่ว่าจะเป็นแจ้งเตือนข้อมูลข่าวสารต่าง ๆ หรือแม้กระทั่งการแจ้งเพื่อการโฆษณา ซึ่งในวันนี้เราจะมาแนะนำการสร้าง PopUp ด้วย [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3863-what-is-jquery.html]jQuery[/url] โดยในปัจจุบันก็ได้มีการพัฒนามาจนถึงเวอร์ชั่นที่ 3.2.1 แล้ว
[img]http://snap.mindphp.com/index.php?view=2017Jun30_5955eb701ebcd[/img]
[b]index.php :[/b]
[code]<!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>[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jun30_5955eb9033228[/img]
จากตัวอย่างด้านบน เรามาอธิบายในแต่ล่ะส่วนกันค่ะ
[b][list]เป็นการเรียกใช้ jquery : [/list][/b]
[code]<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>[/code]
[b][list]การเรียกใช้[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/36-Jquery/2228-jquery-document-ready-function.html]ฟังก์ชั่น[/url] :[/list][/b]
[code] $(document).ready(function () {
$('#p').click(function () {
notify();
});
});
[/code]
[b][list]เป็นในส่วนของข้อความใน popup :[/list][/b]
[code] var notification = new Notification("ยินดีต้อนรับ", { //หัวข้อ
icon: "https://www.mindphp.com/forums/images/avatars/gallery/gallery/tn10.gif",//รูป
body: ".............................ทำสอบสร้างการแจ้งเตือนด้วย Popup.............................",//คำอธิบาย
});[/code]
[b][list]การตั้งเวลาให้ปิด popup :[/list][/b]
[code]setTimeout(function () {
notification.cancel();
}, '1000'); //ตั้งเวลาปิด
}[/code]