Javascript - Custom Confirm Dialog - replacing JS confirmation

Question

This may be the easy answer -

In my JS, I replaced the JS confirmation function with my own. Which basically and just looks like this:

function confirm(i){ var options = '<br/><br/><input class="button1" value="Yes" type="button" onclick="return true"> <input class="button1" value="No" type="button" onclick="return false">'; $('#text').html(i+options); $('#confirmDiv').fadeIn('fast'); } 

Obviously, return true / false does not work, otherwise I would not ask!

In another function I have (So, you get the image):

  var con = confirm("Are you sure you'd like to remove this course?"); if(!con){return;} 

How can I get confirmation to return a value directly? I would suggest that it returns {this.value} or so?

Thanks!

Answer 1

Your problem is that your user confirmation is not modal. This means that when confirmation is confirmed, the code is launched. You have no chance to wait for the user to select in confirm() and return him from there.

As far as I know, there is no way to emulate the behavior of a modal confirmation dialog in Javascript (except for the non-standard ShowModalDialog() .)

The usual way to do this is to add a function() { ... } callback for each click button, and do what "OK" should do.

Answer 2

My way to this problem was to add some objects to the object and check this data on click. If it exists, execute the function as usual, otherwise confirm yes / no (in my case using the jqtools overlay). If the user clicks “yes” - inserts data into the object, simulates another click and destroys the data. If they didn’t click, just close the overlay.

Here is my example:

 $('button').click(function(){ if ($(this).data('confirmed')) { // Do stuff } else { confirm($(this)); } }); 

And this is what I did to override the confirmation function (using jquery tools overlay):

 window.confirm = function(obj){ $('#dialog').html('\ <div>\ <h2>Confirm</h2>\ <p>Are you sure?</p>\ <p>\ <button name="confirm" value="yes" class="facebox-btn close">Yes</button>\ <button name="confirm" value="no" class="facebox-btn close">No</button>\ </p>\ </div>').overlay().load(); $('button[name=confirm]').click(function(){ if ($(this).val() == 'yes') { $('#dialog').overlay().close(); obj.data('confirmed', true).click().removeData('confirmed'); } else { $('#dialog').overlay().close(); } }); } 

Answer 3

I found another hacked solution for emulating the modale dialog box, as mentioned from Pekka 웃. If you break JS execution, there is no need to loop for a while (true). After extracting the user input (click), we can continue to execute JS by calling the origin method again with eval and returning the user selection as logical. I created a small jsfiddle with jquery and notyjs to just show my solution: jsfiddle: overriding the built-in modal confirmation confirmation

Here's the important code again:

 /** confirm as noty.JS **/ var calleeMethod2 = null; var returnValueOfConfirm = null; var args = null; var calleeMethod = null; var refreshAfterClose = null; var savedConfirm = window.confirm; window.confirm = function(obj) { // check if the callee is a real method if (arguments.callee.caller) { args = arguments.callee.caller.arguments; calleeMethod = arguments.callee.caller.name; } else { // if confirm is called as if / else - rewrite orig js confirm box window.confirm = savedConfirm; return confirm(obj); } if (calleeMethod != null && calleeMethod == calleeMethod2) { calleeMethod2 = null; return returnValueOfConfirm; } noty({ text: obj, buttons: [{ text: 'Yes', onClick: function($noty) { $noty.close(); noty({ text: 'YES', type: 'success' }); } }, { text: 'No', onClick: function($noty) { $noty.close(); noty({ text: 'NO', type: 'error' }); } }] }); throw new FatalError("!! Stop JavaScript Execution !!"); } function runConfirmAgain() { calleeMethod2 = calleeMethod; // is a method if (calleeMethod != null) { var argsString = $(args).toArray().join("','"); eval(calleeMethod2 + "('" + argsString + "')"); } else { // is a if else confirm call alert('confirm error'); } }