显示Bootstrap 4模式，但保持href在按钮内工作

Question

我在基于Bootstrap 4的电子商务网站上有一个添加到购物车按钮。我想在"添加到购物车"按钮中添加一个模式触发器(以显示指令(，一切都可以，但如果我尝试直接在按钮中添加模式触发器：

<a role="button" class="btn btn-warning" id="buynow" href="/?add-to-cart=51" data-toggle="modal" data-target="#modal-1">Purchase</a>

显示#modal-1，但产品未添加到购物车中(href功能不起作用(

当我尝试在不添加data-toggle="modal" data-target="#modal-1"属性的情况下以以下方式显示模态时：

$('#buynow').click(function(){
$('#modal-1').modal('show')
});

模式窗口会出现几秒钟，但由于href=/?add-to-cart=51重定向，链接会跟随到Cart页面。

如果我想将产品添加到购物车中(多亏了href触发器(，但模式窗口仍然显示，并且在模式显示时没有重定向，那么该怎么办？

Answer 1

另一种方法是使用类似的数据属性

<a role="button" class="btn btn-warning" id="add-to-cart" data-url="/?add-to-cart=51" href="#modal-1" data-toggle="modal" data-target="#modal-1">Purchase</a>

你的模态应该像这个

<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="modal-1"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
...whatever here. maybe a loading image?
</div>
</div>
</div>
</div>

然后调用URL

$('#modal-1').on('show.bs.modal', function(e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-body').load(button.data("url"));
});

注意，我只是从load(button.data("url")以模态加载内容，您可以按照自己的意愿操作数据属性，例如，您可以只分配一个id为产品data-id="51"的数据属性，而在'show.bs.modal'事件中，您可以调用Ajax请求来执行某些操作。

Answer 2

您可以添加隐藏链接

<div class="add-to-cart-btn">
<a role="button" class="btn btn-warning"  id="buynow"  data-toggle="modal" data-target="#modal-1">Purchase</a>
<a role="button" class="d-none add-to-cart"  href="/?add-to-cart=51" ></a>
</div>
$('#buynow').click(function(){
$('#modal-1').modal('show')
$(this).closest('.add-to-cart-btn').find('.add-to-cart').trigger("click");
});