jQuery Easy Confirm Dialog plugin examples

This is a jQuery based confirm plugin module that will act as the build in confirm-function in javascript but with the ability to style the dialog window. Only using built in jQuery and jQuery UI functions.

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

 

Stuff needed for this example to work

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" />
	<script src="jquery.easy-confirm-dialog.js"></script>

	$(".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>

	$("#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>