如何在javascript中添加带有回调函数的按钮点击事件作为window.conf

How to add button click event with a callback function in javascript as window.confirm

本文关键字：按钮 事件 conf window 函数 javascript 添加 回调      更新时间：2023-09-26

这里的第一个问题，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将被调用。查看生成的弹出窗口将如下所示：弹出消息图像

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

您可以为此使用引导模式。在模态中，您可以执行所需的任何输入，然后单击"提交"btn，该btn将具有JQuery处理程序。然后，您可以获取文本框值，做任何需要做的事情，然后执行回调（或其他任何事情）。

JQuery代码是这样的：

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

和HTML:

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

编辑：

经过一些澄清，我现在理解了这个问题。请参阅以下解决方案：

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

当您的模态打开时，您希望将一个值绑定到每个按钮，单击OK时为true，单击CANCEL时为false。因此，使用下面的函数作为回调。

function onPopupButtonClicked(){
    $(document).on('click','#okBtnPress',function() {
    alert('true'); // TRUE
    });
    $(document).on('click','#cancelBtnPress',function() {
    alert('false'); // TRUE
    });
}

此处的工作示例

相关文章：