Can we create a Javascript confirm box with custom div and message

Question

I need a javascript confirm box with customized design and dynamic message.

My problem is: I need a function to call in that call how can i receive the result of that popup; ( like yes or no). Is that possible?

Code

if (confirm('Are you sure?')){
    //Do the process
}
else{ 
    //Show Error 
}

I want to override that confirm with my custom style

Put the code that depends on the dialog's result into a *callback function*, make the dialog's buttons call that callback with a specific result. Same as you would deal with getting the response from an AJAX call. — DCoder, Mar 11 '13 at 06:24

Surya Pratap · Answer 1 · 2013-03-11T06:19:19.747

How about making a hidden div that will allow the user to respond

    <div id="confirm" class="noshow">
      <div  id="messageContent" class="message"></div>
      <div id="okButton" onClick="doConfirm(true)" class="button"></div>
      <div id="cancelButton" onClick="doConfirm(false)" class="button"></div>
    </div>

now you can set the message easily with getElementById('messageContent') similarly you can now handle the ok and cancel actions with doConfirm(true) and doConfirm(false) functions

in a simple manner your javascript will be something like

doConfirm(flag){
  return flag;
 }

and have css like

.noshow{display:none;}

now you can build the html from javascript at runtime and attach the event handlers but this is about the simplest I could think of.

return confirm("message"); in this commend it will return true or false as return .If i use the above code, how do i get the result. — , Mar 11 '13 at 04:07

score 2 · Answer 2 · edited May 23 '17 at 12:09

For me this solution much better:

html:

<div id='modal_dialog'>
        <div class='title'></div>
        <input type='button' value='yes' id='btnYes' />
        <input type='button' value='no' id='btnNo' />
</div>

js:

function dialog(message, yesCallback, noCallback) {
    $('.title').html(message);
    var dialog = $('#modal_dialog').dialog();

    $('#btnYes').click(function() {
        dialog.dialog('close');
        yesCallback();
    });

    $('#btnNo').click(function() {
        dialog.dialog('close');
        noCallback();
    });
}

use:

    dialog('Are you sure you want to do this?',
        function() {
            //If yes do something
            console.log("yes");
        },
        function() {
            //If no do something else
            console.log("no");
        }
    );

don't forget to add jquery if you didn't.

based on alnorth29 answer to this question

rjv · Answer 3 · 2015-06-15T13:25:39.077

You can use callbacks to do this

Confirm handler, to be added in your global javascript file

function ConfirmInDiv(message, okcallback, cancelcallback) {
  $('#confirmation-holder').show();
  $("#confirmation_message").text(message);
  $('#Confirmation_Ok').unbind('click');
  $('#Confirmation_Ok').click(okcallback);
  $('#Confirmation_Cancel').unbind('click');
  $('#Confirmation_Cancel').click(cancelcallback);
}

function HideConfirmDiv() {
  $('#confirmation-holder').hide();
}

HTML, should reside in your layout file:

<div id="confirmation-holder" style="display:none">
    <div id="confirmation_message"></div>
    <a id="Confirmation_Ok" href="#" class="button">OK</a>
    <a id="Confirmation_Cancel" href="#" class="button light-button">Cancel</a>
</div>

And wherever you want to call your javascript confirm:

Instead of this

function delete()
{
     if(confirm("Delete?")
     {
         console.log('deleted');
     }
     else
     {
         console.log('delete cancelled');
     }
}

do this

function delete()
{
    function ok()
    {
         console.log('deleted');
         HideConfirmDiv();
    }
    function cancel()
    {
         console.log('delete cancelled');
         HideConfirmDiv();
    }
    ConfirmInDiv('Delete?', ok, cancel);   
}

Can we create a Javascript confirm box with custom div and message

3 Answers3