bootstrap -模式关闭按钮未关闭

Question

我使用bootstrap 4，我在laravel项目中添加了一个模态。

代码:

........
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>

基本上，关闭按钮的数据解散不工作，当我点击它什么也没发生。我检查了引导文档，一切似乎都井然有序。我尝试过的一些解决方案是删除没有任何作用的fade类。我也试过添加$('#closeButtonID').modal('hide');，但它似乎不起作用。

如何解决这个问题?

Answer 1

1. 确保如果你使用CDN，然后检查你的互联网连接，或者你使用本地图书馆，然后试着去查看页面源代码检查你的本地图书馆是否正确地与你的网页集成。
2. 或者我认为你需要通过下面的参考链接尝试它https://getbootstrap.com/docs/4.0/components/modal/

Answer 2

你能试试吗

$('#confirmOrder').modal('hide');

不是

$('#closeButtonID').modal('hide');

你可以试着把它作为

按钮点击的事件处理程序

$('. btn-secondary').on('click', function() {
$('#confirmOrder').modal('hide');
})

Answer 3

Try This

<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30" data-target="#confirmOrder" data-toggle="modal">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>