如何限制引导框模态的关闭图标关闭模态不触发取消答案

【问题标题】：How to restrict the close icon of the bootbox modal to close the modal not to fire cancel如何限制引导框模态的关闭图标关闭模态不触发取消
【发布时间】：2017-06-15 04:51:19
【问题描述】：

我已经为警报实现了引导箱。我面临两个我无法解决的问题。当我单击一个按钮时，会打开一个带有两个按钮“是”和“否”按钮的引导框确认。但是当我点击右上角的关闭按钮时，我猜这个框是要关闭的，而是触发取消按钮。另一个问题是当点击“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>

【问题讨论】：

这是设计使然，因为它模仿了本机确认对话框的行为。您是否有理由不希望单击关闭按钮或单击取消按钮获得相同的结果？

标签： javascript jquery bootstrap-modal bootbox

【解决方案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>

【讨论】：