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

 }

现在我只想传递一些简单的参数来创建弹出窗口并向用户显示，现在当用户点击弹出窗口中的任何按钮时，应该调用用户创建的回调函数并且它将传递参数它将告诉result，其中包含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

你可以使用bootstrap模式。在模式中，您可以执行所需的任何输入，然后提交＆＃39;单击时将具有JQuery处理程序的btn。然后，您可以获取文本框值，执行您需要执行的操作，然后执行回调（或其他任何操作）。

JQuery代码就像这样：

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

和HTML：

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

编辑：

经过一番澄清，我现在明白了这个问题。请参阅下面的解决方案：

要做到这一点，必须为每个Modal动态生成模态，然后在删除按钮上，您要添加的是模态打开，它实际上不会开始删除记录。确认后，“是”＆＃39;按钮将执行您的删除代码。取消按钮只是......好吧，取消。要做到这一点，你需要一个2模态的模态树，删除窗口（或其他）的外部树，以及确认窗口的内部树。

Answer 2

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

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

工作示例here

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

2 个答案: