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

Question

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

在我的JS中，我已经用自己的confirm函数替换了JS的confirm函数。它基本上很简单，看起来像这样：

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

如何让confirm直接返回值？我猜应该是return {this.value}之类的吧？

谢谢！

- Michael Mikhjian

---

确认Div的内容是什么？ - Kon

不太容易实现。通常，“确认”操作会等待用户提供答案。由于Javascript没有等待/休眠功能，您必须通过使用回调来解决此问题。 - Wolph

可能是Can you wait for javascript callback?的重复问题。 - Wolph

另一个示例，如何在此处执行：https://dev59.com/8Gw15IYBdhLWcg3wtNuO#12357337 - user1662805

Answer 1

你的问题是，自定义确认框不是模态的。这意味着当你的确认框显示时，代码会继续运行。你没有机会在`confirm()`中等待用户的选择并从那里返回。

据我所知，除了非标准的ShowModalDialog()之外，JavaScript没有模拟模态确认对话框的方法。

通常的做法是为每个按钮的`click`事件添加一个function() { ... }回调，在其中执行“确定”点击应该执行的操作。

- Pekka

Answer 2

我解决这个问题的方法是在对象中添加一些任意数据，并在单击时检查该数据。如果它存在，则按照正常方式继续执行函数，否则使用yes / no进行确认（在我的情况下，使用jqtools叠加层）。如果用户单击“是” - 将数据插入对象，模拟另一个单击并清除数据。如果他们点击“否”，只需关闭叠加层。

这是我的示例：

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

以下是我使用 jQuery 工具覆盖 confirm 函数的方法：

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

- Steve

Answer 3

我发现了另一个被黑客攻击的解决方案，可以模拟像Pekka 웃之前提到的模式对话框。如果中断JS执行，就没有必要在while(true)循环中进行。在检索用户输入（单击）后，我们可以继续使用JS执行，同时调用eval原始方法并将用户选择作为布尔值返回。 我创建了一个小的jsfiddle，使用jquery和notyjs来简单展示我的解决方案： jsfiddle：覆盖本机模态确认警报

以下是重要代码：

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

- Mitch