Lightweight jQuery Confirmation Modal For Bootstrap - Download Lightweight jQuery Confirmation Modal For Bootstrap

Download Lightweight jQuery Confirmation Modal For Bootstrap

Posted on

This time I will share jQuery Plugin and tutorial about Lightweight jQuery Confirmation Modal For Bootstrap, hope it will help you in programming stack.

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



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.

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

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

1 <form>
2   <button class="btn btn-primary"
3     data-toggle="confirm"
4     data-title="Wait!"
5     data-message="Are you sure?"
6     data-type="success">
7     Confirm Form Submition
8   </button>
9 </form>

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

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

4. Customize the modal template.

1 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="mySmall<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a>Label" 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.




source : jqueryscript.net