This time I will share jQuery Plugin and tutorial about Easy Confirm Dialog With Bootstrap – BootConfirm.js, hope it will help you in programming stack.
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.
1 |
< link rel = "stylesheet" href = "/path/to/cdn/bootstrap.min.css" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
3 |
< script src = "/path/to/cdn/bootstrap.min.js" ></ script > |
4 |
< script src = "BootConfirm.js" ></ script > |
2. Attach the confirm modal to an action button.
1 |
< button class = "simple" > |
1 |
$( ".simple" ).BootConfirm(); |
3. Customize the confirmation message.
1 |
$( ".simple" ).BootConfirm({ |
2 |
message: 'Are you sure to delete this item?' |
4. Perform an action when you click the OK button.
1 |
$( ".simple" ).BootConfirm({ |
5. Attach the confirm modal to a form submit button and validate the form using the jQuery Validation plugin.
1 |
< script src = "/path/to/cdn/jquery.validate.min.js" ></ script > |
2 |
< label for = "email" >Email address:</ label > |
3 |
< input type = "email" id = "email" /> |
4 |
< label for = "pwd" >Password:</ label > |
5 |
< input type = "password" id = "pwd" /> |
6 |
< button type = "submit" >Submit</ button > |
1 |
$( ":submit" ).BootConfirm({ |