带回调的引导通用模式

Question

我已经用引导模式替换了我的 JS Confirm 函数，这个模式是异步的，所以我还必须更改我的代码并添加回调。

我想要做的是：

伪代码

if `simApp["con1"]` then show first modal with 2 buttons
    if return is clicked -> close modal.
    if continue is clicked -> open second modal
        if return is clicked -> close modal
        if submit is clicked -> submit form (not included in code)
else open second modal
    if return is clicked -> close modal
    if submit is clicked -> submit form (not included in code)

当你不使用回调时，这一切都非常简单，我对回调还很陌生。

这就是我所做的，它的 NOT 工作，我想这与模态的一般使用有关。 - JSFIDDLE

HTML

<div class="modal fade" id="generalModalTwoButtons" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title"></h4>

            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" id="btn-return" class="btn btn-primary" data-dismiss="modal"></button>
                <button type="button" id="btn-submit" class="btn btn-primary" data-dismiss="modal"></button>
            </div>
        </div>
    </div>
</div>
<button id="go">GO</button>

JS

simApp = {};
simApp["con1"] = true;  //in this code I hard-coded the conditions to ture
simApp["arr"] = [1];

$("#go").click(function () {
    if (simApp["con1"] && simApp["arr"].length < 5) {
        var msg = '<p>msg1</p>';

        updateGeneralTwoButtonsModal('#a94442', 'header1', msg, 'Return', 'Continue', function (result) {
            if (result === true) {
                confirmBeforeSubmit(submitFormApproved);
            }
        });
    } else {
        confirmBeforeSubmit(submitFormApproved)
    }
});

function submitFormApproved(result) {
    if (result === true) {
        console.warn("submitted");
    }
}

function confirmBeforeSubmit(callback) {
    var msg = '<p>msg2</p>';
    if (simApp["con1"]) msg = '<p>msg2-changed</p>';

    updateGeneralTwoButtonsModal('#31708f', 'header2', msg, 'Return', 'Submit', callback);
}

function updateGeneralTwoButtonsModal(color, title, body, btnReturn, btnSubmit, callback) {
    var confirm = $('#generalModalTwoButtons');
    confirm.find('.modal-header').css('color', color);
    confirm.find('.modal-title').text(title);
    confirm.find('.modal-body').html(body);
    confirm.modal('show');

    confirm.find('#btn-return').html(btnReturn).off('click').click(function () {
        confirm.modal('hide');
        callback(false);
    });
    confirm.find('#btn-submit').html(btnSubmit).off('click').click(function () {
        confirm.modal('hide');
        callback(true);
    });

}

知道我做错了什么吗？

P.S - 出于学习目的，我想避免在此解决方案中使用 Promise。

Answer 1

你去吧，我发现的主要问题是你没有阻止自动关闭模式的点击事件的传播。我在继续/提交按钮的事件中添加了事件处理程序 stopPropagation。

simApp = {};
simApp["con1"] = true;
simApp["arr"] = [1];

$("#go").click(function () {
    if (simApp["con1"] && simApp["arr"].length < 5) {
        var msg = '<p>msg1</p>';

        updateGeneralTwoButtonsModal('#a94442', 'header1', msg, 'Return', 'Continue', function (result) {
            if (result === true) {
                confirmBeforeSubmit(submitFormApproved);
            }
        });
    } else {
        confirmBeforeSubmit(submitFormApproved)
    }
});

function submitFormApproved(result) {
    if (result === true) {
        console.warn("submitted");
    }
}

function confirmBeforeSubmit(callback) {
    var msg = '<p>msg2</p>';
    if (simApp["con1"]) msg = '<p>msg2-changed</p>';

    updateGeneralTwoButtonsModal('#31708f', 'header2', msg, 'Return', 'Submit', callback);
}


function updateGeneralTwoButtonsModal(color, title, body, btnReturn, btnSubmit, callback) {
    var confirm = $('#generalModalTwoButtons');
    confirm.find('.modal-header').css('color', color);
    confirm.find('.modal-title').text(title);
    confirm.find('.modal-body').html(body);
    confirm.modal('show')
    

    confirm.find('#btn-return').html(btnReturn).off('click').click(function () {
        confirm.modal('hide');
        
        callback(false);
    });
    confirm.find('#btn-submit').html(btnSubmit).off('click').click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        if(btnSubmit != "Continue") {
        	confirm.modal('hide');
        }
        callback(true);
    });

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="modal fade" id="generalModalTwoButtons" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title"></h4>

            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" id="btn-return" class="btn btn-primary" data-dismiss="modal"></button>
                <button type="button" id="btn-submit" class="btn btn-primary" data-dismiss="modal"></button>
            </div>
        </div>
    </div>
</div>
<button id="go">GO</button>