Press "Enter" to skip to content

Pure JavaScript Library To Show Customizable Alert Notifications | Simple Notify

Simple Notify is a pure JavaScript library for showing nice alert notifications and is customizable for displaying toast-style alert popups on the page.

Features:

  • 4 built-in notification types.
  • 2 animation: slice or fade.
  • Refuses cars or not.
  • Custom icon.
  • Dedicated stand.
  • And much more.

How to make use of it:

1. Load the minified version of the Simple Notify JavaScript library on the HTML web page.

<link rel="stylesheet" href="dist/simple-notify.min.css" />
<script src="dist/simple-notify.min.js"></script>

2. Create a primary alert notification.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
})

3. Create a toast notification that routinely dismisses after 3 seconds.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    autoclose: true,
    autotimeout: 3000
})

4. Determine the notification type: ‘success’, ‘error’, or ‘warning’.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    status: 'success'
})

5. Determine the animation you’d like to make use of.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    effect: 'slide',
    speed: 300 // animation speed
})

6. Determine whether or not to point out icons & close the button.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    isCloseButton: false,
    isIcon: false,
})

7. Specify the area between notifications.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    gap: 20,
    distance: 20 // space between popup & screen edge
})

8. Specify the place of the notifications.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    position: 'right top'
})

9. Set the theme you’d like to make use of:

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    type: 2
})

10. Add a customized icon to the notification.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    customIcon: 'any html here'
})

11. Add a customized CSS class to the notification.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    customClass: 'any class here'
})

12. Close the notification manually.

instance.close();

JavaScript Plugin For Custom Toast Notifications, Simple Notify Github


See Demo And Download

Official Website(dgknca): Click Here

This superior jQuery/javascript plugin is developed by dgknca. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *