Confirm with Jquery UI Dialog

1. First example: Confirm link

Go to miniscript.it

<a href="http://www.miniscript.it" class="confirm">Go to miniscript.it</a>

2. Second example: Confirm link with setting massage

Go to miniscript.it

<a href="http://www.miniscript.it" class="confirm" rel="Open miniscript.it?">Go to miniscript.it</a>

3. Third example: Confirm submit form

<form method="post" action="demo.php">
	<input type="text" name="example" value="" />
	<input type="submit" value="submit" class="confirm" />
</form>

4. Fourth example: Confirm submit form with settin message

<form method="post" action="demo.php">
	<input type="text" name="example" value="" />
	<input type="submit" value="submit" class="confirm" />
</form>

Needed dependency

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js" ></script>
<script type="text/javascript" src="jquery.ui.widget.js" ></script>
<script type="text/javascript" src="jquery.ui.position.js" ></script>
<script type="text/javascript" src="jquery.ui.dialog.js" ></script>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />

Download: jQuery UI download

The script

$(document).ready(function() {
	
	var default_message_for_dialog = 'You are sure?';
	
	$("#dialog").dialog({
		modal: true,
		bgiframe: true,
		width: 300,
		height: 200,
		autoOpen: false,
		title: 'Confirm'
		});

	// LINK
	$("a.confirm").click(function(link) {
        link.preventDefault();
        var theHREF = $(this).attr("href");
		var theREL = $(this).attr("rel");
		var theMESSAGE = (theREL == undefined || theREL == '') ? default_message_for_dialog : theREL;
		var theICON = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>';
		
		// set windows content
		$('#dialog').html('<P>' + theICON + theMESSAGE + '</P>');
		
		$("#dialog").dialog('option', 'buttons', {
                "Confirm" : function() {
                    window.location.href = theHREF;
                    },
                "Cancel" : function() {
                    $(this).dialog("close");
                    }
                });
		$("#dialog").dialog("open");
		});

	
	// FORMS
	$('input.confirm').click(function(theINPUT){
		theINPUT.preventDefault();
		var theFORM = $(theINPUT.target).closest("form");
		var theREL = $(this).attr("rel");
		var theMESSAGE = (theREL == undefined || theREL == '') ? default_message_for_dialog : theREL;
		var theICON = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>';
		
		$('#dialog').html('<P>' + theICON + theMESSAGE + '</P>');
		$("#dialog").dialog('option', 'buttons', {
                "Confirm" : function() {
					theFORM.submit();
                    },
                "Cancel" : function() {
                    $(this).dialog("close");
                    }
                });
		$("#dialog").dialog("open");
		});

});

Adding empty div id="dialog" in to the body

<div id="dialog"></div>