Bootstrap Alert / Confirm Modal Plugin With jQuery

Bootstrap.alert is a jQuery plugin for generating highly customizable Bootstrap based alert / confirm modal windows to replace the default JavaScript popup boxes.

Features:

• Based on Bootstrap styles and Modal component.
• Countdown timer for confirm using TimeCircles plugin.
• Close if click outside or after confirm / decline.
• Custom modal types: basic, info, success, warning and danger.

How to use it:

1. Add jQuery, Bootstrap and other required resources into your webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/TimeCircles.css">

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/TimeCircles.js"></script>
<script src="/path/to/underscore-min.js"></script>

2. Load the jQuery Bootstrap.alert plugin after jQuery JavaScript library.

<script src="bootstrap.alert.js"></script>

3. The JavaScript to display a basic alert box on the screen.

$.alert({
  title: 'Modal Title'
  body: 'Modal Content'
});

4. Customize the plugin with the following options.

$.alert({

  // modal title
  title: '',

  // modal content
  body: '',

  // display a close timer
  is_delayed: true,

  // close modal after confirm
  close_after_calback_confirm: true,

  // close modal after decline
  close_after_calback_decline: true,

  // callbacks
  callback_confirm: function(){console.log('accepted');},
  callback_decline: function(){console.log('declined');},

  // text for confirm button
  text_confirm: 'ok',

  // text for decline button
  text_decline: null,

  // extra CSS class
  extra_class: '',

  // default time of the timer
  timer_modal: 50,

  // close modal if click outside
  click_outside_for_close: true,

  // can be sucess, info, warning, danger or empty
  type: '',   

});

---

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