最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Javascript - Custom Confirm Dialog - replacing JS confirm - Stack Overflow

programmeradmin1浏览0评论

This may be a easy answer-

In my JS I've replaced JS's confirm function with my own. Which basically and simply 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 the return true / false didn't work, or else I wouldn't be asking!

In another function i've got (So you get the picture):

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

How can I get confirm to return the value directly? I'd assume it's return {this.value} or so?

Thanks!

This may be a easy answer-

In my JS I've replaced JS's confirm function with my own. Which basically and simply 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 the return true / false didn't work, or else I wouldn't be asking!

In another function i've got (So you get the picture):

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

How can I get confirm to return the value directly? I'd assume it's return {this.value} or so?

Thanks!

Share Improve this question asked Mar 12, 2011 at 14:24 Michael MikhjianMichael Mikhjian 2,7944 gold badges37 silver badges53 bronze badges 4
  • What are the contents of confirmDiv? – Kon Commented Mar 12, 2011 at 14:26
  • 1 Not easily possible. Normally a confirm waits until the user has provided an answer. Since Javascript doesn't have a wait/sleep you have to work around this issue by using a callback. – Wolph Commented Mar 12, 2011 at 14:30
  • possible duplicate of Can you wait for javascript callback? – Wolph Commented Mar 12, 2011 at 14:30
  • another example how do it here: stackoverflow.com/questions/6457750/form-confirm-before-submit/… – user1662805 Commented Sep 11, 2012 at 12:13
Add a comment  | 

3 Answers 3

Reset to default 9

Your problem is that your custom confirm isn't modal. That means that when your confirm is shown, the code runs on. There is no chance for you to wait for the user's choice within confirm() and return it from there.

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

The usual way of doing this is adding a function() { ... } callback to each button's click event, and doing whatever the "ok" click is supposed to do in there.

My way around this problem was to add some arbitrary data to the object, and check for that data on click. If it existed, proceed with the function as normal, otherwise confirm with a yes/no (in my case using a jqtools overlay). If the user clicks yes - insert the data in the object, simulate another click and wipe the data. If they click no, 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 confirm function (using a 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();
        }
    });
}

I found another hacked solution to emulate the modale dialog like mentioned from Pekka 웃 before. If you break the JS execution there is no need to loop in a while(true). After retrieving the users input (click) we can go on with JS execution while calling the origin method again with eval and returning the users choice as boolean. I created a small jsfiddle with jquery and notyjs to simply show my solution: jsfiddle: Overriding native modal confirm alert

Here again the important code:

/** 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');
  }
}
发布评论

评论列表(0)

  1. 暂无评论