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.');} });

License

MIT Licensed.