Easy Confirm Dialog With Bootstrap - BootConfirm.js
File Size: | 17.8 KB |
---|---|
Views Total: | 2375 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
BootConfirm.js is a tiny and simple-to-use jQuery plugin that creates a Bootstrap based confirm modal to gracefully confirm user actions like submitting a form, deleting an item, etc.
How to use it:
1. Load the BootConfirm.js script in the HTML page. Make sure that you have loaded the latest jQuery library and Bootstrap framework in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> <script src="BootConfirm.js"></script>
2. Attach the confirm modal to an action button.
<button class="simple"> Delete </button>
$(".simple").BootConfirm();
3. Customize the confirmation message.
$(".simple").BootConfirm({ message: 'Are you sure to delete this item?' });
4. Perform an action when you click the OK button.
$(".simple").BootConfirm({ complete: function(){ alert('Confirmed') } });
5. Attach the confirm modal to a form submit button and validate the form using the jQuery Validation plugin.
<script src="/path/to/cdn/jquery.validate.min.js"></script>
<form action="#"> <label for="email">Email address:</label> <input type="email" id="email" /> <label for="pwd">Password:</label> <input type="password" id="pwd" /> <button type="submit">Submit</button> </form>
$(":submit").BootConfirm({ validateForm:true });
This awesome jQuery plugin is developed by thankikaushik. For more Advanced Usages, please check the demo page or visit the official website.