Jquery - Custom Confirm Dialog

Question

I am in need to create a custom confirm dialog without any external libraries. Reason is, less code and i want style the design how i want.

Fiddle: https://jsfiddle.net/j4hmdy17/

The issue i am having with the code:

if( my_confirm() ) {
    console.log( 'Process ajax!' );
}

The condition doesn't return true when dialog confirmed box button "Yes" is clicked.

Code:

if( my_confirm() ) {
    console.log( 'Process ajax!' );
}

function my_confirm() {

var dialog = '<div id="confirm-dialog" class="confirm-dialog-open">';
        dialog += '<div class="confirm-dialog">';
            dialog += '<div class="confirm-dialog-container">';
                    dialog += '<div class="confirm-dialog-header">';
                        dialog += '<div class="confirm-heading">Are you sure?</div>';
                    dialog += '</div>';

                    dialog += '<div class="confirm-dialog-footer">';
                        dialog += '<button class="confirm-cancel">No</button>';
                        dialog += '<button class="confirm-success">Yes</button>';
                    dialog += '</div>';
            dialog += '</div>';
        dialog += '</div>';
    dialog += '</div>';

jQuery( '#dialog_container' ).html( dialog );
jQuery( document ).on( 'click', '#confirm-dialog .confirm-success', function() {
    return true;
});

return false;

}

Anyone?

Answer 1

The native confirm function, like alert , is blocking, and prevents any further script execution or page interaction until the user responds to the prompt. This has no equivalence in anything you can write in the GUI.

You will need to adapt your custom confirm function to be callback driven.

my_confirm(function() {
   alert('Process ajax!');
});

function my_confirm(confirmCallback, cancelCallback) {
    // your confirm dialog

    jQuery( document ).on( 'click', '#confirm-dialog .confirm-success', function() {
       if(typeof confirmCallback === 'function') {
           confirmCallback();
       }
    });

}