jquery

jQuery Easy Confirm Dialog plugin

jQuery Easy Confirm Dialog is an easy to use confirm plugin module that acts as a built in, customizable confirm-function. It's only dependencies are jQuery and jQuery UI.

No need for manual callbacks, the default event will be put on hold and only executed if user confirms.

If there are any actions on the target these will be executed. If there are no actions but a URL present then the user will be redirected.

Stuff needed for this example to work

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.css" type="text/css" />
<script src="jquery.easy-confirm-dialog.js"></script>

Change log

  • 1.4 Added support for jQuery "on" event bubbling (example)
  • 1.3 Fixed compatibility with jQuery 1.8+ and changed default button to OK. Thanks to Marko.
  • 1.2 Fixed re-binding bug and allows users to set their own min and max heights. Thanks to Vitaliy Zhukov and JoeBonham.
  • 1.1 Fixed compatibility with jQuery 1.6+ and added Italien translation. Thanks to François Bernier and antoniopironti.
  • 1.0 Plugin created.

How to get started

$(".confirm").easyconfirm();
$("#alert").click(function() {
	alert("You approved the action");
});
<a href="#" class="confirm" id="alert">Normal test</a>
<a href="?confirm=true" class="confirm">Normal test with a link</a>
<a href="?confirm=true" class="confirm" title="Are you sure you want to click on this link?">Normal test with a link</a>

Settings

By default all click events are handled, but you could use this plugin for any other event handled by jquery. You could bind to the form submit event with the following code.

$(".confirm").easyconfirm({
        eventType: 'submit',
});

To set a custom min/max height, simply use

$(".confirm").easyconfirm({
        minHeight : 100, // default 120
        maxHeight : 250 // default 250
});

More examples

$("#yesno").easyconfirm({locale: { title: 'Select Yes or No', button: ['No','Yes']}});
$("#yesno").click(function() {
	alert("You clicked yes");
});
<a href="#" id="yesno">Normal test with yes and no</a>


$(".customDialog").easyconfirm({dialog: $("#question")});
<a href="?confirm=true" class="customDialog">Test with custom confirm dialog</a>
<div class="dialog" id="question"><img src="question.png" alt="" />Do you want to continue?</div>
Do you want to continue?

$("#svSE").easyconfirm({locale: $.easyconfirm.locales.svSE});
$("#svSE").click(function() {
	alert("Tack för ditt bidrag!");
});
<a href="#" id="svSE">Test with swedish localization</a>

$("#french").easyconfirm({locale: {
	title: 'Etes-vous sûr?',
	text: 'Etes-vous sûr que vous souhaitez effectuer cette action?',
	button: ['Annuler',' Confirmer'],
	closeText: 'fermer'
}});
$("#french").click(function() {
	alert("Je vous remercie de votre soumission!");
});
<a href="#" id="french">Test with custom localization</a>

$("#add-dynamic").click(function(e) {
    e.preventDefault();
    var $parent = $(this).closest("ul");
    var $link = $("<a></a>").attr("href","#").text("Dynamic link nr. "+ $parent.find("li").length).addClass("dynamic-link");
    $link.easyconfirm();
    $parent.append($("<li>").append($link));
});

$(".dynamic-list").on("click", ".dynamic-link", function(e) {
    e.preventDefault();
    alert("Do action with event bubbling");
});

Comments

comments powered by Disqus