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

你可以试试吗

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

代替

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

您可以尝试将其提供给按钮单击的事件处理程序吗

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

Answer 2

确保如果您使用 CDN，请检查您的互联网连接，或者您使用本地库，然后尝试查看页面源代码，检查您的本地库是否与您的网页正确集成..
或者我认为您需要通过以下参考链接尝试一下 https://getbootstrap.com/docs/4.0/components/modal/

Answer 3

试试这个

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

引导程序 - 模态关闭按钮未关闭

3 个答案: