Lightweight Themable Notification Plugin For jQuery - Noticejs

Noticejs is a very small (3kb minified) jQuery plugin for displaying notification messages which can be integrated into any CSS framework (e.g. Bootstrap).

How to use it:

1. Load the main JavaScript file notice.min.js after you've loaded jQuery library as this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="notice.js"></script>

2. In this case, we're going to use Bootstrap framework for the notification styles.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="theme/bootstrap/bootstrap.js"></script>

3. Display a default notification with custom title and content on the webpage.

$.notice({
  title: "Notification Title"
  content: "Notification Content"
});

4. Customize the notification message with the following options.

$.notice({
  title: "Notification Title"
  content: "Notification Content"
},{
  themePath: "theme/bootstrap/",
  themeName: "DefaultTheme",
  themeMinification: false,
  isRtl: false,
  noticeClose: true,
  noticePosition: "topRight",
  defaultNoticePosition: {
    topRight:{
        top: "10px",
        right: "10px"
    },
    topCenter:{
        top: "10px",
        left: "50%",
        transform: "translate(-50%, 0)"
    },
    topLeft:{
        top: "10px",
        left: "10px"
    },
    middleRight:{
        right: "10px",
        top: "50%",
        right: "10px",
        transform: "translate(0px, -50%)",
    },
    middleCenter:{
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
    },
    middleLeft:{
        left: "10px",
        top: "50%",
        right: "10px",
        transform: "translate(0px, -50%)",
    },
    bottomRight:{
        bottom: "10px",
        right: "10px"
    },
    bottomCenter:{
        bottom: "10px",
        left: "50%",
        transform: "translate(-50%, 0)"
    },
    bottomLeft:{
        bottom: "10px",
        left: "10px"
    }
  },
  html: {
    container: "<div class=\"noticejs\"></div>",
    notice: "<div class=\"notice\"></div>",
    header: "<div class=\"notice-header\"></div>",
    title: "<div class=\"notice-title\"></div>",
    close: "<div class=\"notice-close\">&times;</div>",
    body: "<div class=\"notice-body\"></div>",
    footer: "<div class=\"notice-footer\"></div>"
  },
  defaultNoticeType: {},
  noticeType: ""
});

5. Add your own theme as you seen in the theme/bootstrap/bootstrap.js.

$.notice.addTheme({
  themePath: "theme/bootstrap/",
  themeName: "bootstrap",
  themeMinification: true,
  isRtl: false,
  html: {
    container: "<div class=\"noticejs\"></div>",
    notice: "<div class=\"notice alert\"></div>",
    header: "<div class=\"notice-header\"></div>",
    title:  "<div class=\"notice-title\"></div>",
    close:  "<div class=\"notice-close\">&times;</div>",
    body:   "<div class=\"notice-body\"></div>",
    footer: "<div class=\"notice-footer\"></div>"
  },
  defaultNoticeType: {
    error: {
        className: "alert-danger",
        attributes:{}
    },
    warning: {
        className: "alert-warning",
        attributes:{}
    },
    info: {
        className: "alert-info",
        attributes:{}
    },
    success: {
        className: "alert-success",
        attributes:{}
    }
  },
  noticeType: "error"
});

---

This awesome jQuery plugin is developed by alihesari. For more Advanced Usages, please check the demo page or visit the official website.