Lightweight jQuery Confirmation Modal For Bootstrap

File Size: 3.42 KB
Views Total: 6698
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Confirmation Modal For Bootstrap

A jQuery plugin which helps you create a Bootstrap modal-based confirmation dialog popup for link redirection and form submission.

How to use it:

1. Download and include the JavaScript file bootstrap.confirm.js in your Bootstrap & jQuery project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="bootstrap.confirm.js"></script>

2. Display a confirm dialog before submitting an html form.

<form>
  <button class="btn btn-primary" 
    data-toggle="confirm" 
    data-title="Wait!" 
    data-message="Are you sure?"
    data-type="success">
    Confirm Form Submition
  </button>
</form>

3. Display a confirm dialog before opening an external link.

<a href="http://www.google.com" 
  data-toggle="confirm" 
  data-title="Wait!" 
  data-message="Are you sure?"
  data-type="danger">
  Confirm link
</a>

4. Customize the modal template.

template: '<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header bg-{{type}} text-{{type}}"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 id="mySmallModalLabel" class="modal-title">{{title}}</h4></div><div class="modal-body">{{message}}</div><div class="modal-footer"><button class="btn btn-default" data-dismiss="modal">Cancel</button><button class="btn btn-{{type}}" data-trigger="confirm">Confirm</button></div></div></div></div>',

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