Easy Confirm Dialog With Bootstrap - BootConfirm.js

File Size: 17.8 KB
Views Total: 2336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Confirm Dialog With Bootstrap - BootConfirm.js

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.