Javascript - 自定义确认对话框 - 替换JS确认

时间:2011-03-12 14:24:16

标签: javascript

这可能是一个简单的答案 -

在我的JS中,我用自己的替换了JS的确认功能。基本上和简单地看起来像这样:

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');
}

显然返回true / false不起作用,否则我不会问!

我有另一个功能(所以你得到了照片):

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

如何确认直接返回值?我假设它返回{this.value}左右?

谢谢!

3 个答案:

答案 0 :(得分:9)

您的问题是您的自定义确认不是模态。这意味着当您显示确认时,代码将继续运行。您无法在confirm()内等待用户的选择并从那里返回。

据我所知,没有办法模仿Javascript中模态确认对话框的行为(非标准ShowModalDialog()除外。)

通常的做法是为每个按钮的function() { ... }事件添加一个click回调,然后执行“ok”点击应该执行的操作。

答案 1 :(得分:5)

解决这个问题的方法是向对象添加一些任意数据,并在点击时检查该数据。如果它存在,则按正常方式继续操作,否则使用是/否确认(在我的情况下使用jqtools叠加)。如果用户单击“是” - 将数据插入对象中,则模拟另一次单击并擦除数据。如果他们点击否,请关闭叠加层。

以下是我的例子:

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

这就是我所做的覆盖确认功能(使用jquery工具叠加):

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();
        }
    });
}

答案 2 :(得分:1)

我找到了另一个黑客攻击解决方案来模拟之前从Pekka提到的modale对话框。如果你破坏JS执行,就不需要循环(true)。在检索用户输入(单击)之后,我们可以继续执行JS,同时使用eval再次调用origin方法并将用户选择返回为boolean。 我用jquery和notyjs创建了一个小jsfiddle来简单地显示我的解决方案: jsfiddle: Overriding native modal confirm alert

这里重要的代码:

/** 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');
  }
}