สร้างการแจ้งเตือนด้วย 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 » 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: "http://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: "http://www.mindphp.com/forums/images/avatars/gallery/gallery/tn10.gif",//รูป
    body: ".............................ทำสอบสร้างการแจ้งเตือนด้วย Popup.............................",//คำอธิบาย
  });


    การตั้งเวลาให้ปิด popup :

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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน