Question

我遇到一个问题，如果以下代码中的#complete_sale_button被快速点击两次;有2个对话框出现。

我意识到我可以创建状态变量var isOpen = TRUE并在再次打开对话框之前进行检查;但我有很多这些确认对话框和其他引导框对话框，如警报和提示。

如果我可以将bootbox功能扩展为不允许2个对话框，那将是很好的。这使我的代码更清洁。你知道我在哪里可以找到关于如何扩展它的文档;或者这样做的示例方法？（我看了http://bootboxjs.com/documentation.html#bb-confirm-dialog-options）

现在是代码：

$("#complete_sale_button").click(function(e)
{
    e.preventDefault();
    bootbox.confirm('Are you sure you are done with sale?', function(result)
    {
        if(result)
        {
            window.location = 'http://localhost/sales/complete';
        }
    });
});

Answer 1

使用bootbox.hideAll()。

＆＃13;

$("#complete_sale_button").click(function(e) {
  e.preventDefault();
  bootbox.hideAll();
  bootbox.confirm('Are you sure you are done with sale?', function(result) {
    if (result) {
      window.location = 'http://localhost/sales/complete';
    }
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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://cdn.jsdelivr.net/bootbox/4.1.0/bootbox.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button id="complete_sale_button">Click Me</button>

＆＃13;

Answer 2

这是我提出的解决方案，不需要对原始代码进行任何修改。这看起来效果很好;但是想要一些我不想要的反馈或边缘案例。

$(document).on('show.bs.modal','.bootbox.modal', function (e) 
{
    var isShown = ($(".bootbox.modal").data('bs.modal') || {}).isShown;
    //If we have a dialog already don't open another one
    if (isShown)
    {
        //Cleanup the dialog(s) that was added to dom
        $('.bootbox.modal:not(:first)').remove();

        //Prevent double modal from showing up
        return e.preventDefault();
    }
});

bootbox.confirm阻止在另一个对话框出现时调用它

2 个答案: