Responsive Modal-style Alert Dialog With jQuery - alert.js

alert.js is a minimal (less than 1kb) jQuery plugin which helps create a responsive, cross-browser, modal-style alert dialog with an animated background overlay on the html page.

How to use it:

1. Insert jQuery library, alert.css, and alert.js into the page.

<link href="alert.jquery.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="alert.jquery.js"></script>

2. You might need a trigger element to toggle the alert dialog (OPTIONAL).

<button id="trigger">ALERT</button>

3. Initialize the alert dialog and define your own alert message as follows:

$.createAlert({
  attachAfter: '#trigger',
  title: 'You have reached the limit or your quota!',
  confirmText: 'Accept',
  confirmStyle: 'blue',
  callback: null
});

4. Show the alert dialog on the page.

$.showAlert();

5. If you want to enable the trigger element to toggle the alert dialog.

$('#trigger').click(function(){
  $.createAlert({
    attachAfter: '#trigger',
    title: 'You have reached the limit or your quota!',
    confirmText: 'Accept',
    confirmStyle: 'blue',
    callback: null
  });
  $.showAlert();
});   

6. Override the default styles of the alert dialog as you seen in the alert.css:

#alert_backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
  ;
  display: none;
}

#alert_dialog {
  position: fixed;
  top: 20%;
  left: 30%;
  width: 40%;
  padding: 20px;
  box-sizing: border-box;
  background: #FFF;
  box-shadow: 0px 0px 2px 2px #6B6B6B;
  display: none;
}

#alert_title {
  color: #525252;
  padding: 0px 0px 5px 5px;
  font-weight: bold;
  font-size: 18px;
}

#alert_actions {
  margin-top: 20px;
  text-align: center;
}

#alert_actions button {
  padding: 10px 15px;
  border: 0;
  color: #FFFFFF;
  text-transform: uppercase;
  cursor: pointer;
  -khtml-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}

#alert_actions button.blue { background: #007aff; }

7. Customize the template of the alert dialog.

$.createAlert({
  attachAfter: '#trigger',
  title: 'You have reached the limit or your quota!',
  template: `
    <p> This a template to provide some info to the customer <p>
    <p> <strong> Alert: </strong> Read it carefully </p>`,
  confirmText: 'Accept',
  confirmStyle: 'blue',
  callback: null
});

Changelog:

2018-07-03

• Fixed 'mouseup' event name

2018-06-30

• Bugfix

2018-05-16

• Added template option

2018-02-06

• Made it responsive

---

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