如何限制啟動箱模態的關閉圖標以關閉模態不觸發取消

Question

我已經實現了用於警告的引導箱。 我面臨兩個我無法解決的問題。 當我單擊一個按鈕時，將通過兩個按鈕“是”和“否”打開引導確認窗口。 但是，當我單擊右上角的關閉按鈕時，我猜想此框將被關閉，而是觸發了取消按鈕。 另一個問題是，當單擊“ Esc”按鈕時，還會觸發關閉按鈕。 誰能告訴我如何限制這個問題。

 $(function() { $('.alert').on('click', function() { bootbox.confirm({ message: "This is a confirm with custom button text and color! Do you like it?", buttons: { confirm: { label: 'Yes', className: 'btn btn-primary' }, cancel: { label: 'No', className: 'btn btn-default' } }, callback: function(result) { if (result == true) { bootbox.prompt({ title: "This is a prompt with a set of checkbox inputs!", className: 'box 2', callback: function(result) { console.log(result); } }); } else if (result == false) { alert('you have clicked No Button'); } else { alert("There is some Error"); } console.log('This was logged in the callback: ' + result); } }); }) }) 

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> <p>Content here. <a class="alert" href=#>Alert!</a></p> 

Answer 1

<script>
$(function() {
    $('.alert').on('click', function() { 

        var onSubmit = function() {
            //Process form data
            alert("Submit");
            dialog.modal('hide');
        }

        var onCancel = function()
        {
            bootbox.dialog({
                message: '<input class="form-control input-sm" id="inputsm" type="text">',
                title: "Custom label",
                onEscape: true,
                buttons: {
                    main: {
                        label: "Save",
                        className: "btn-primary",
                        callback: function() {
                            console.log("Save");
                        }
                    }
                }
            })
        }

        var dialog = bootbox.dialog({
            message: "Perform this task?",
            onEscape: true,
            buttons: {
                cancel: {
                    label: 'No',
                    className: 'btn-default',
                    callback: onCancel
                },
                confirm: {
                    label: 'Yes',
                    className: 'btn-primary',
                    callback: onSubmit  // Handles OK button
                }
            }
        });

    })
})

</script>