Resources

http://jqueryui.com/demos/dialog/#modal-confirmation

A Nice And Simple Dialog Box

Add the following to your HTML page.

At the top somewhere

(Doesn't have to be in the head)

<!-- JQUERY UI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

<!-- div element used for confirmation and other dialogs -->
<div id="dialog-confirm" style="display:none;"></div>
<!-- -->

The function that will be called

<script type="text/javascript">
	//----- MY ARE YOU SURE DIALOG -----
	$(".my_are_you_sure_dialog").live('click', function(e){
		e.preventDefault();
		
		//----- OPTIONAL GET SPECIAL VALUES INCLUDED IN THE LINK -----
		var variable1 = $(this).attr("some_variable");
		
		$("#dialog-confirm").html("<p>" + $(this).attr("message") + "</p>");
		
		$( "#dialog-confirm" ).dialog(
		{
			resizable: false,
			modal: true,
			buttons:
			{
				"Yes": function()
				{
					//----- YES -----
					$( this ).dialog( "close" );
					window.location = "http://www.mydomain.com";      // <<< Set this to the target URL for the action (e.g. maybe this page with arguments after the URL?)
				},
				Cancel: function()
				{
					//----- CANCEL -----
					$( this ).dialog( "close" );
				}
			},
			title: $(this).attr("title")
		});
		return false;
	});
</script>

The Link, which contains the dialog message to be displayed and optionally values to pass

<a href="javascript:void(0)" class="my_are_you_sure_dialog" title="Are you sure"  message="Do you want to do this?" some_variable="some_value">CLICK HERE</a>
<!-- href="javascript:void(0)" stops the link doing anything if javascript isn't available -->