Highly Customizable and Mobile-Ready Alert Box

Simple Jquery Alert is a highly customizable, textbook-based alert box. This notification plugin for creating animated, CSS notification boxes inspired by Material Design Snackbars.

jquery alert popup, jquery alert dialog, jquery alert popup design, jquery alert plugin, alert message in javascript, customize javascript alert box css

How to make use of it:

1. Insert the jQuery Simple Alert Plugin’s JavaScript and CSS information into the online web page.

<link rel="stylesheet" href="/path/to/src/jquery-simple_alert.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery-simple_alert.js"></script>

2. Display a primary snackbar notification on the display.

simpleAlert({
  text: 'This is a snackbar style notification'
})

3. Determine the place of the notification box.

simpleAlert({
  text: 'This is a snackbar style notification',
  orientation:'tl'
})

4. Customize the text and background colors.

simpleAlert({
  text: 'This is a snackbar style notification',
  bg_color: '#222',
  text_color: '#fff'
})

5. Trigger a function once you click on the ‘Okay’ button.

simpleAlert({
  text: 'This is a snackbar style notification',
  after_alert: function () {
    alert('Callback');
  }
})

6. Override the default types & CSS3 animations within the CSS.

.simple_alert_div {
  position: fixed;
  background-color: green;
  opacity: 1;
  z-index: 1;
  color: white;
  padding: 8px;
  transition: all .1s ease;
  transition-property: top, right, bottom, left, opacity;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  min-height: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  /* margin: 0 0 0 24px; */
  line-height: 22px;
  padding: 10px 10px;
  z-index: 9999;
  border-radius: 2px;
}

Simple Snackbar Style Alert Box Plugin, Simple Jquery Alert Plugin/Github