Confirmation Dialog with jQuery

A confirmation dialog asks the user to approve or cancel an action before it continues. This example uses jQuery UI Dialog and passes the result to a callback.

Create the Dialog Top ↑

$( "#confirm-dialog" ).dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 400,

    buttons: {
        Yes: function () {
            $( this ).dialog( "close" );
            handleConfirmation( true );
        },

        No: function () {
            $( this ).dialog( "close" );
            handleConfirmation( false );
        }
    }
});

Handle the User Choice Top ↑

function handleConfirmation( confirmed ) {
    $( "#confirm-result" ).text(
        confirmed
            ? "You clicked Yes."
            : "You clicked No."
    );
}

Open the Dialog Top ↑

$( "#confirm-open" ).on( "click", function () {
    $( "#confirm-message" ).text(
        "Confirm to submit?"
    );

    $( "#confirm-dialog" ).dialog( "open" );
});

Original confirmation-box demo →

jQuery UI Dialog tutorial · click events

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

$("#dialog-window").dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        title: "Confirm Box",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
 });

Original example 2

function callback(value) {
 if (value) {
  $('#display').html('You clicked Yes button') 
 }// end of if (value )
else{
// code to execute if false
$('#display').html('You clicked No button') 
}
} // end of callback function

Original example 3

$("#b1").click(function(){
$("#dialog-window").html("Confirm to Submit ...");
$( "#dialog-window" ).dialog( "open" );
})

Additional Original Learning Routes Top ↑

• http-get.php
• http-post.php
• load.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: