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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย Ik Kat »

การใช้ 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'); //ตั้งเวลาปิด
}
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google Adsense [Bot], rketsawas และบุคลทั่วไป 28