使用Bootstrap模态框替代Javascript警告框

Question

我目前正在为客户构建一个网站，他们要求最少购买6件商品。因此，如果顾客只有5件商品并点击结账，则需要警告他们必须至少购买6件商品。我目前使用JavaScript的alert来警告他们，但这不允许自定义。我想添加一个Bootstrap模态框，但无法弄清楚如何操作。

以下是我目前所拥有的代码：

<script>
    paypal.minicart.render();

    paypal.minicart.cart.on('checkout', function (evt) {
        var items = this.items(),
            len = items.length,
            total = 0,
            i;

        // Count the number of each item in the cart
        for (i = 0; i < len; i++) {
            total += items[i].get('quantity');
        }

        if (total < 6) {
            alert('The minimum order quantity is:\n\n3 Cases of Beer\n6 Bottles of Wine\n6 Bottles of Spirits.\n\nPlease add more to your shopping cart before checking out');
            evt.preventDefault();
        }
    });
</script>

- Chris Campbell

Answer 1

http://jsfiddle.net/SeanWessell/4z16m6k4/

你需要添加模态框的标记。

HTML：

<!-- Modal -->
<div class="modal fade" id="cartMessage" tabindex="-1" role="dialog" aria-labelledby="cartMessageLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>
                 <h4 class="modal-title" id="cartMessageLabel">Minimum Order Requirements Not Met</h4>

            </div>
            <div class="modal-body">The minimum order quantity is:
                <ul>
                    <li>3 Cases of Beer</li>
                    <li>6 Bottles of Wine</li>
                    <li>6 Bottles of Spirits.</li>
                </ul>Please add more to your shopping cart before checking out</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

当达成条件时，需要触发模态框。

$('#checkout').on('click', function (evt) {
    var total = 5
    if (total < 6) {
        $('#cartMessage').modal()
        evt.preventDefault();
    }
});

- Sean Wessell

Answer 2

这里有一个警告函数，它可以动态注入 Bootstrap 模态框并显示消息。如果模态框已经存在于 DOM 中，则将重用它。

var bsAlert = function(message) {
   if ($("#bs-alert").length == 0) {
      $('body').append('<div class="modal tabindex="-1" id="bs-alert">'+
        '<div class="modal-dialog">'+
            '<div class="modal-content">'+
              '<div class="modal-header">'+
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+
                '<h4 class="modal-title">Alert</h4>'+
              '</div>'+
              '<div class="modal-body">'+
                  message+
              '</div>'+
              '<div class="modal-footer">'+
                '<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>'+
              '</div>'+
            '</div>'+
          '</div>'+
        '</div>')
    } else {
        $("#bs-alert .modal-body").text(message);
    }    
    $("#bs-alert").modal();
}

使用 bsAlert('hello world'); 显示警告框。

您可以将原生的 alert() 替换为

window.alert = bsAlert;

现在alert('test')将会显示Bootstrap模态框。

示例 -> http://jsfiddle.net/qg48fer1/

- davidkonrad

---

非常感谢这个。 - Chris Campbell