javascript - 如何在javascript中使用回调函数添加按钮单击事件作为window.confirm

Question

这里是第一个问题，Stackoverflow 的新手，所以如果我有什么遗漏的地方，请指导我。我的问题如下，

我正在创建一个自定义弹出消息，例如 window.confirm。在函数中，用户需要传递一些参数，例如消息头、消息内容和类型以及回调函数，当用户单击弹出窗口上的按钮时将执行该回调函数。

为了创建弹出窗口，我编写了以下代码:

 function CreatePopupMessage(IsConfirm,ContentMsg,Headertext,WithoutHeader,callbackFunction){    
    var popupHtml = '<div class="modal-dialog">';
    popupHtml += '<div class="modal-content">';
    if(WithoutHeader == true){
        popupHtml += '<button type="button" class="close" style="position:absolute;z-index:9999;right:0;margin-right:10px;margin-top:2px;" data-dismiss="modal" aria-hidden="true">×</button>';
    }
    else{
        popupHtml += '<div class="modal-header">';
        popupHtml += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
        popupHtml += '<h4 class="popup-header-text">'+Headertext+'</h4>';
        popupHtml += '</div>';
    }
    popupHtml += '<div class="modal-body">';
    popupHtml += '<p>'+ContentMsg+'</p>';
    popupHtml += '</div>';
    popupHtml += '<div class="modal-footer">';
    popupHtml += '<button class="btn btn-primary" id="okBtnPress" data-dismiss="modal" aria-hidden="true">Ok</button>';
    if(IsConfirm == true){
        popupHtml += '<button class="btn btn-default" id="cancelBtnPress" data-dismiss="modal" aria-hidden="true">Cancel</button>';
    }        
    popupHtml += '</div>';
    popupHtml += '</div>';
    popupHtml += '</div>'; 

    $('div#Timed_CustomPopupModel').html(popupHtml);

    // Callback function Which will be executed
   // NEED HELP HERE TO WORK OUT HOW TO ATTACH THE BUTTON CLICK WITH THE CALLBACK FUNCTION AS ARGUMENT
      callbackFunction(argument); // Argument should be the single which will tell user that on which button user has been clicked , like in windo.confirm we get 'true' when we click OK button and get 'false ' when we click 'Cancel' button

 }

现在我只想传递一些简单的参数，这些参数将创建弹出窗口并向用户显示，现在当用户单击弹出窗口中的任何按钮时，应该调用用户创建的回调函数，并且它将传递一个参数这将告诉结果，其中包含 true 或 false 作为 window.confirm。

所以我将在弹出消息中传递的回调函数将如下所示:

 function onPopupButtonClicked(result){
     if(result == true){
        // Ok button pressed in the popup, please perform this
     }
     else if(result == false){
        // Cancel button pressed in the popup, please perform this
     }
 }

 // Call the popup generate function 
  CreatePopupMessage(true,'Confirm With the Operation?','Confirm',false,onPopupButtonClicked);

当我们执行此代码时，它将显示弹出窗口，当我们单击任何按钮时，我们的回调函数onPopupButtonClicked将被调用。看到生成的弹出窗口将如下所示: Popup Message image

请帮助我如何实现此功能。谢谢

Answer 1

您可以为此使用引导模式。在模式中，您可以执行所需的任何输入，然后单击“提交”按钮，单击该按钮将有一个 JQuery 处理程序。然后，您可以获取文本框值，执行您需要执行的任何操作，然后执行回调(或其他操作)。

JQuery 代码如下所示:

$(function(){
  $('#btnId').click(function(cb){
    //Do whatever you need to do here
  })
})

和 HTML:

<input ... />
<input ... />
<button id='btnId'>Submit</button>

编辑:

经过一些澄清，我现在明白了这个问题。解决方案请参见下面:

要做到这一点，必须为每个模态动态生成模态，然后在删除按钮上添加的只是模态打开，它实际上不会开始删除记录。确认后，"is"按钮将执行您的删除代码。取消按钮只是……好吧，取消。为此，您需要一棵包含 2 个模态的模态树，外部模态用于删除窗口(或其他窗口)，内部模态用于确认窗口。