如何一个接一个地打开Bootstrap模式弹出窗口？

Question

在mvc应用程序中，我有一个HTML表，使用Ajax在加载时创建数据。这个HTML表由N个记录组成，我已经使用Jquery将分页应用到表中，因此只有10个记录被添加到表上的单个页面中。

现在，html表的第一列是复选框，这意味着如果我选择标题中的复选框，则会选择表格特定页面中的所有记录。我在顶部有几个按钮，它们之间的某些功能是一个删除按钮，它删除从表中选择的所有记录。现在的问题是，对于每个记录，模态弹出窗口应该显示询问＆＃34;您要删除{somename}的记录吗？＆＃34;。我有一个确认按钮和一个取消按钮。

点击＆＃34;确认＆＃34;将删除特定的记录详细信息，然后再次显示一个新的弹出窗口，要求确认删除记录。如果我单击取消，那么就应该关闭当前弹出窗口，并且应该打开新的弹出窗口，要求确认删除记录。

以下是我做的代码

//Create a modal popup
function BootstrapModalPopUp(modalId, ButtonConfirmID, ButtonCancelID, ButtonText, modalTitle, modalBody) {
    var popUpContent = '<div class="modal fade" id="myModal' + modalId + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'
   + '<div class="modal-dialog" role="document">'
   + '<div class="modal-content">'
       + '<div class="modal-header">'
           + '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
           + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + '</h4>'
       + '</div>'
       + '<div class="modal-body">'
           + '<h4 class="modal-title" id="myModalLabel">' + modalBody + '</h4>'
       + '</div>'
       + '<div class="modal-footer">';

    if (ButtonConfirmID != '') {
        popUpContent += '<button id="btn' + ButtonConfirmID + '" type="button" class="btn btn-primary" data-dismiss="modal">Confirm</button>'
                + '<button id="btn' + ButtonCancelID + '" type="button" onclick="modalpopupcancel()" class="btn btn-primary" data-dismiss="modal">' + ButtonText + '</button>'
    }
    else {
        popUpContent += '<button id="btn' + ButtonCancelID + '" type="button" onclick="modalpopupcancel()" class="btn btn-primary" data-dismiss="modal">' + ButtonText + '</button>'
    }
    + '</div></div></div></div>';
    $('#myModalPopups').append(popUpContent);
}


//On click of the button
    function EmailConfirmationSubmit(buttonName) {
        $('#' + buttonName).click(function () {
            //Getting the number of CheckBox
            var $chkboxes = $('#tblMemberList').find("tr input[type='checkbox']:checked");
            //Getting the ID (checked value) from the CheckBox and storing in Array
            var checkBoxVals = $chkboxes.map(function () { return $(this).attr('id'); }).toArray();

            //remove the first element of the checkbox. This is the header of the checkbox which we dont need to show the pop up for
            if ($.inArray('memberListHeaderCheckBox', checkBoxVals) > -1) {
                checkBoxVals.splice($.inArray("memberListHeaderCheckBox", checkBoxVals), 1);
            }

            var ModalIdBeforeCreation = 'DeleteConfirmation';
            var ModalConfirmIDBeforeCreation = '_DeleteConfirm';
            var ModalCancelIDBeforeCreation = '_DeleteCancel';

            //Checking the Array whether it is not empty
            if (!isArrayEmpty(checkBoxVals)) {
                //Loop through each selected checkbox
                checkBoxVals.forEach(function (CheckBox) {

                    //Get id and name of the check box. The name is the pension ID
                    var CheckBoxID = $("#" + CheckBox).val();
                    var CheckBoxName = $("#" + CheckBox).attr('name').toString();

                    var ModalId = ModalIdBeforeCreation + CheckBoxID;
                    var ModalConfirmID = ModalConfirmIDBeforeCreation + CheckBoxID;
                    var ModalCancelID = ModalCancelIDBeforeCreation + CheckBoxID;
                    var ModalMessage = 'Do you want to delete the records for the member ' + CheckBoxName + ' ?'

                    $("#"+ModalId).remove();
                    //Create dynamic pop up based on each Pension ID which is selected on Html Table
                    BootstrapModalPopUp(ModalId, ModalConfirmID, ModalCancelID, 'Cancel', 'Delete Confirmation', ModalMessage);
                });

                var checkBoxID = $('#' + checkBoxVals[0]).attr('id');
                CreateAlertsForActions(ModalIdBeforeCreation,ModalConfirmIDBeforeCreation,ModalCancelIDBeforeCreation,checkBoxVals,checkBoxID,PageActions.OnDelete,Controllers.CommutedPensions,"OnDelete");
            }
            else {

                //do something
            }
        });
    }


//Create alerts
function CreateAlertsForActions(ModalIdBeforeCreation,ModalConfirmIDBeforeCreation,ModalCancelIDBeforeCreation,CheckBoxArray,checkBoxID,PageAction,ControllerName,ActionName)
{
    var checkBoxValue  = $('#' + checkBoxID).val();

    var index = CheckBoxArray.indexOf(checkBoxID);

    //Again get the new ID
    checkBoxID = $('#' + CheckBoxArray[index+1]).attr('id');

    if(checkBoxValue != undefined)
    {
        var ModalId = ModalIdBeforeCreation + checkBoxValue;
        var ModalConfirmID =ModalConfirmIDBeforeCreation + checkBoxValue;
        var ModalCancelID = ModalCancelIDBeforeCreation+ checkBoxValue;

        $('#myModal'+ModalId).modal('show');

        //On Confirm Click
        $('#myModal' + ModalId).on('click', '#btn' + ModalConfirmID, function () {

            AjaxRequestToControllerAction(ControllerName,ActionName,PageAction,checkBoxValue);

            CreateAlertsForActions(ModalIdBeforeCreation,ModalConfirmIDBeforeCreation,ModalCancelIDBeforeCreation,CheckBoxArray,checkBoxID,PageAction,ControllerName,ActionName);
        });

        //Popup Cancel button click event
        $('#myModal' + ModalId).on('click', '#btn'+ModalCancelID, function () {

            CreateAlertsForActions(ModalIdBeforeCreation,ModalConfirmIDBeforeCreation,ModalCancelIDBeforeCreation,CheckBoxArray,checkBoxID,PageAction,ControllerName,ActionName);
        });

        //Popup close button click event
        $('#myModal' + ModalId).on('click', '#btn'+ModalCancelID, function () {

            CreateAlertsForActions(ModalIdBeforeCreation,ModalConfirmIDBeforeCreation,ModalCancelIDBeforeCreation,CheckBoxArray,checkBoxID,PageAction,ControllerName,ActionName);
        });

        //When the mouse is clicked out side of the popup
        $('#myModal' + ModalId).on('hidden.bs.modal', function () {

            CreateAlertsForActions(ModalIdBeforeCreation,ModalConfirmIDBeforeCreation,ModalCancelIDBeforeCreation,CheckBoxArray,checkBoxID,PageAction,ControllerName,ActionName);
        });
    }
}


function AjaxRequestToControllerAction(Controller, ActionMethod, Action, CheckBoxValue) {
$.ajax({
    //The Url action is for the Method FilterTable and the Controller CurrentYearApplications
    //url: '@Url.Action("' + ActionMethod + '", "' + Controller + '")',
    url: '/' + Controller + '/' + ActionMethod + '/',
    //The text from the drop down and the corresponding flag are passed. Flag represents the Index of the value in the dropdown
    data: { ID: CheckBoxValue, PageAction: Action },
    contentType: "application/json; charset=utf-8",
    //Json data
    datatype: 'json',
    //Specify if the method is GET or POST
    type: 'GET',
    //Error function gets called if there is an error in the ajax request
    error: function (jq, status, message) {
        //Show error
    },

    //Gets called on success of the Ajax Call
    success: function (data) {

    //Do things after success

    }
});
}

如果只选择了4,5条记录，那么一切正常，但当我选择大约10条记录并选择删除它们时，前4,5工作正常，那么弹出窗口似乎崩溃。

对此方面的任何帮助或对替代方法的建议都将非常感激。

先谢谢。