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

Answer 2

这是一个警报功能，可以动态注入引导模式并显示消息。如果模态已经存在于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')将显示引导模式。

演示 - ＆gt;的 http://jsfiddle.net/qg48fer1/

使用Bootstrap模式代替Javascript警报

2 个答案: