Pages Navigation Menu

Coding is much easier than you think

How to use JQuery dialog as Confirm dialog?

There are quite a few articles you might have read on SimpleCodeStuffs on jQuery like jQuery Tutorial for Beginners, AJAX implementation in Servlets using jQuery and jQuery UI etc.
This example will help you if you have any one of below queries:

  • How to implement “confirmation” dialog in jQuery UI dialog?
  • How to use jQuery UI dialog as JavaScript confirm BOX?
  • How to use JQuery dialog as Confirm dialog?
  • jQuery UI Replacement for alert()

Issue: How many times did you have to code some confirmation logic on your website to ensure that your users are sure about the action they are about to perform?
A typical example is prompting the user to confirm that they are sure about deleting a record. In typical/boring JavaScript world, you would do something like this:



<input type="submit" id="delete" value="Delete" onclick="javascript:deleteConfirmation();" />




function deleteConfirmation() {  
    return confirm("Are you sure you want to delete this item?");

There is nothing wrong with this above code. However, it is plain. You cannot customize it with CSS make it look consistent with your site’s colour and identity.

jQuery to the rescue

jQuery UI has the solution for you. You can use the jQuery UI Dialog to present users with customized confirmation/dialog boxes as shown below.
Let’s see how to implement this


Firstly, let’s add the necessary jQuery libraries in the head section of the Jsp page.

<!DOCTYPE html>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<!-- User Defined Js file -->
<script type="text/javascript">/js/confirmJs.js</script>
     <form method="post" action="delete.html">
	<input type="submit" class="button" id="Delete" name="Delete" value="Delete" />



File: confirmJs.js

    $('#Delete').click(function(event) {
	var currentForm = $(this).closest('form');
	/** Create div element for delete confirmation dialog*/
	var dynamicDialog = $('<div id="conformBox">'+
	'<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">'+
        '</span>Are you sure to delete the item?</div>');
		title : "Are you sure?",
		closeOnEscape: true,
		modal : true,
	       buttons : 
				text : "Yes",
				click : function() {
				text : "No",
				click : function() {
	return false;

The code above instantiates the dialog box and assigns it two buttons. The”Yes”and”No”buttons. The “Yes” is responsible for submitting the form to the server.

Other jQuery tutorial from our Blog



jQuery closest() Method

About Mohaideen Jamil

Am currently working as a Struts 2 Developer in a reputed IT Organisations. I can help you with teaching Core java and Struts 2. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.