javascript - 使用 Bootstrap Modal 代替 Javascript Alert

Question

我目前正在为客户建立一个网站，他们要求至少订购 6 件商品。因此，如果客户只有 5 件商品并点击结帐，则需要警告他们必须至少拥有 6 件商品。我目前有一个 Javascript alert 来警告他们，但这不允许定制。我想添加一个 Bootstrap Modal，但不知道如何完成。

这是我目前得到的代码:

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

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();
    }
});