1

我想做自定义确认功能。

所以，我做了一个像这样的代码：

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 个参数。

如何制作自定义确认功能？

4

3 回答 3

1

就个人而言，我会使用已经为此编写的第三方对话框，编写一个 jQuery 插件，或者至少采用更面向对象的方法。就目前而言，您正在将一个confirm函数放在全局命名空间中（其中一个confirm函数已经存在）。

另请注意，您不能停止页面的执行并等待类似window.confirmcan 的响应。请参阅：如何重现 JavaScript 的 confirm() 函数提供的“等待”功能？（接受的答案是“你不能”）。

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

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); } }
于 2013-03-03T06:06:12.133 回答
1

在找到值之前，您不能让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?");
于 2013-03-03T06:06:51.683 回答
1

就像我的情况一样，我使用 promise 来解决删除确认问题，这是代码

function deleteBook(id, elm) {
const container_alert = document.querySelector('.container-alert') 
 
alertMsg('Anda yakin ingin menghapus?').then(() => {
        // console.log('i love you');
        let index = books.findIndex(book => book.id == id);
        books.splice(index, 1)
        updateDataToStorage();
        elm.parentNode.parentNode.remove()
        
        container_alert.classList.add('hidden')
}).catch(() => {
    container_alert.classList.add('hidden')
})

}

我的警报功能代码如下

function alertMsg(msg) {
const container_alert = document.querySelector('.container-alert') 
const btn_yes = document.querySelector('.action-alert .yes')
const btn_cancel = document.querySelector('.action-alert .cancel')

container_alert.classList.remove('hidden')

return new Promise((resolve, reject) => {

    btn_yes.addEventListener('click', function(){
        resolve()  
    })

    btn_cancel.addEventListener('click', function(){
        reject()
    })
})

}

于 2022-02-09T07:08:51.787 回答