jQuery Plugin To Manage Bootstrap Alerts And Modals - alert-modal.js

alert-modal.js is a jQuery plugin that makes it easy to create Bootstrap alerts and modals with custom content and action buttons for site notifications or confirm/alert dialog popups.

How to use it:

1. The plugin requires jQuery and Bootstrap's style sheet included on the web page.

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

2. Include the jQuery alert-modal.js plugin's JS and CSS files on the web page.

<link rel="stylesheet" href="css/alert-modal.min.css">
<script src="js/alert-modal.min.js"></script>

3. Create an empty container to place your alerts and modals.

<div id="theAlertModal" class="alert-modal"></div>

4. Initialize the plugin and we're ready to go.

var tam = $('theAlertModal').AlertModal();

5. Create a custom confirmation dialog.

var myTags = { tag1: "a string from myTags", tag2: "another string"};

tam.show({
  alert_class:  "alert-modal-dialog",
  content:      { html: "Are you sure you want to take that action?", classname: "text-center" },
  buttons:      { ok_button: "Yes", cancel_button: "No" },
  tags:         myTags,
  dismiss_callback: function(btn_name, tags) {
    alert("Modal Dialog Callback - Button Pressed:"+btn_name+", Tags passed:"+tags.tag1)
  }
});

6. Create notification alerts.

tam.show({
  alert_class:  "alert-modal-info",
  content:      { html: "This is the Information modal" }
});

tam.show({
  alert_class:  "alert-modal-warning",
  content:      { html: "This is the Warning modal" }
});

tam.show({
  alert_class:  "alert-modal-danger",
  content:      { html: "This is the Danger modal" }
});

alert_class:  "alert-modal-success",
  content:      { html: "This is the Success Modal" },
  tags :        myTags,
  dismiss_callback: function(btn_name, tags) {
    alert("Success Modal Callback - Button Pressed:"+btn_name+", Tags passed:"+tags.tag1+" and "+tags.obj2.aString)
  }
});

---

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