简体   繁体   中英

How to restrict the close icon of the bootbox modal to close the modal not to fire cancel

I have implemented bootbox for alert. I am facing two problem which I could not being able to solve. When I click on a button, a bootbox confirm is opened with two button 'Yes' and 'No' button. But when I click at the close button at top right corner, I guess this box is to be closed but instead it is firing cancel button. Another problem is when is click on 'Esc' button, it is also firing the close button. Can anybody tell me how to restrict this problem.

 $(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> 

<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM