AreYouSure.js 
Inline confirmation dialogs for Javascript.
Download
Uncompressed (3 Kb) Minified (2 Kb)
Demo
http://stevenloria.com/AreYouSure.js/
Install
- With Node:
npm install areyousure - With bower:
bower install areyousure - With component:
component install sloria/AreYouSure.js
Or in HTML:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="areyousure.js"></script>Usage
Just add data-areyousure to any clickable element to add an inline confirmation dialog to it.
<button data-areyousure>Big Red Button</button>That's it!
And more
Implicit creation using HTML:
<!-- No configuration -->
<button data-areyousure>Default</button>
<!-- Custom text -->
<button data-areyousure="¿Está seguro?" data-confirm="Sí" data-cancel="No">Custom Text</button>
<!-- Callbacks -->
<button id="callbacks" data-areyousure>Callbacks</button>
<script>
$(function() {
$("#callbacks + .areyousure-dialog [data-ays-action='confirm']").on('click', function() {alert("Sure.");});
$("#callbacks + .areyousure-dialog [data-ays-action='cancel']").on('click', function() {alert("Not sure.");});
});
</script>Or programatically, with jQuery:
// No configuration
$("#default").areyousure();
// Custom text
$("#customText").areyousure({text: "¿Está seguro?", confirmText: "Sí", cancelText: "No"});
// Callbacks
$("#callback").areyousure({ yes: function() {alert('Sure.');},
no: function() {alert('Not sure.');} });