Fork me on GitHub

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

Usage:

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)
}

Demos:

macOSNotif()
macOSNotif({btn2Text:null})
macOSNotif({mainLink:'#'})
macOSNotif({mainLink:'#', btn1Text:null})
macOSNotif({imageSrc: 'https://mattcowley.co.uk/me.png'})
macOSNotif({sounds:true})