Question

我想制作自定义确认功能。

所以，我做了一个代码：

function confirm(msg){
  var obj = document.createElement("div");
  var body = document.createElement("div");
  body.innerHTML = msg;

  var foot = document.createElement("div");

  var ok = document.createElement("div");
  ok.innerHTML = "OK";

  var cancel = document.createElement("div");
  cancel.innerHTML = "Cancel";

  foot.appendChild(ok);
  foot.appendChild(cancel);
  obj.appendChild(body);
  obj.appendChild(foot);

  document.getElementsByTagName("body")[0].appendChild(obj);

  ok.onclick = function(){
    return true;
  }

  cancel.onclick = function(){
    return false;
  }
}

或

returnValue = -1;
ok.onclick = function(){
  returnValue = true;
}

canacel.onclick = function(){
  returnValue = false;
}

while(true){
  if(returnValue !== -1) break;
}

return returnValue;

如果此自定义确认功能必须获得原始确认功能等1个参数。

如何进行自定义确认功能？

Answer 1

就个人而言，我会使用已为此编写的third-party dialog，编写一个jQuery插件，或至少采用更面向对象的方法。就目前而言，您在global namespace中放置了confirm函数（其中confirm函数已经存在）。

另请注意，您无法暂停执行页面并等待window.confirm之类的响应。请参阅：How can I reproduce the "wait" functionality provided by JavaScript's confirm() function?（接受的答案是“你不能”）。

执行此类任务的可用方法是使用回调：

function customConfirm(message, resultCallback){

    ok.onclick = function(){

      // note that you can pass whatever you want to the callback
      // you are not limited to one parameter.
      resultCallback(true);
    }

    cancel.onclick = function(){
       resultCallback(false);
    }
}

在上面的示例中，resultCallback是一个定义为执行操作以响应确认框中的事件的函数。

您可以传递一个包含消息和回调的对象来实现单个参数目标，但我怀疑真正的目标是替换window.confirm（如上所述）行为不同。

{ message: "foo", callback: function bar(status){ alert(status); } }

Answer 2

在找到值之前，您不能暂停confirm功能，否则整个页面都会冻结。在这种情况下你需要提供一个回调来执行一旦点击任何一个按钮（如果由于任何原因你不能将它作为参数传递，你必须使用全局变量，或者可能是一个队列）：

var queue = [];
function confirm(msg){
  ...
  var callback = queue.shift();
  ok.onclick = function(){
    callback(true);
  }

  cancel.onclick = function(){
    callback(false);
  }
}

你这样使用它：

queue.push(function(returnValue) {
    if ( returnValue ) {
       // Code for "yes"
    }
    else {
       // Code for "no"
    }
});
confirm("Are you sure?");

如何使功能像确认

2 个答案: