Fork me on GitHub

A simple Javascript plugin to create simulated macOS notifications on your website.


To get started call the function macOSNotif.
To make proper use of the fucntion, you can supply an object of options as listed below.

options = {
    delay: .5,                              // Delay before display (in seconds)
    autoDismiss: 0,                         // Delay till automatic dismiss (0 = Never, in seconds)
    interactDismiss: true,                  // Toggle swipe/drag to dismiss
    sounds: false,                          // Play sounds for notification
    zIndex: 5000,                           // The css z-index value of the notification
    imageSrc: null,                         // Link of the icon to display (null to hide icon)
    imageName: "",                          // Alt/Title text of the icon
    imageLink: null,                        // Link for icon click (null for no link, '#' for dismiss)
    title: "macOSNotifJS",                  // Main Notif Title
    subtitle: "Default notification text",  // Main Notif Sub Title
    mainLink: null,                         // Link for the main text body (null for no link, '#' for dismiss)
    btn1Text: "Close",                      // Text for Button 1 (null to hide all buttons)
    btn1Link: null,                         // Link for Button 1 (null or '#' for dismiss only)
    btn2Text: "Go",                         // Text for Button 2 (null to hide second button)
    btn2Link: null,                         // Link for Button 2 (null or '#' for dismiss only)


macOSNotif({mainLink:'#', btn1Text:null})
macOSNotif({imageSrc: ''})