This time I will share jQuery Plugin and tutorial about Sliding Confirm Dialog Plugin with jQuery and Bootstrap – Confirm, hope it will help you in programming stack.
Confirm is a jQuery plugin used to popups an animated and heavily customizable confirm dialog box styled with Bootstrap modal component.
How to use it:
1. Include jQuery library, Bootstrap 3 framework and the jQuery confirm plugin in the document.
1 |
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> |
3 |
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
4 |
<script src="jquery.confirm.js"></script> |
5 |
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> |
2. Create a link or button to trigger a confirm dialog.
3. Call the plugin with default options to trigger a simple confirm dialog box sliding from the top of the web page. Once you click on the ‘Yes’ button, the current page will go to the URL specified in the href attribute.
4. Customize the confirm dialog via JS.
04 |
title:"Delete confirmation", |
07 |
text:"Are you really really sure?", |
10 |
confirm: function(button) { |
11 |
alert("You just confirmed."); |
15 |
cancel: function(button) { |
16 |
alert("You aborted the operation."); |
5. Customize the confirm dialog via Html5 data-* attributes.
2 |
data-title="Hello there!" |
3 |
data-confirm-button="Yes"> |
Change logs:
2016-11-01
- Change options overriding order.
2016-10-02
- Fix submitForm options behaviour
2016-04-14
2015-03-20
2014-12-20
- add a cancelButtonClass option which allows to add custom cancel button class
This awesome jQuery plugin is developed by myclabs. For more Advanced Usages, please check the demo page or visit the official website.
