bootstrap - 模态关闭按钮未关闭答案

【问题标题】：bootstrap - modal close button not closingbootstrap - 模态关闭按钮未关闭
【发布时间】：2021-07-28 10:31:16
【问题描述】：

我正在使用 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');，但似乎效果不佳。

我该如何解决这个问题？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以试试

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

而不是

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

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

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

【讨论】：

数据关闭不起作用是因为某处有事件传播吗？
不，按钮是直接在模态右边给的，我们检查一下。但是隐藏工作正常吗？
你能把完整的代码贴在哪里吗？
在按钮点击时，你能不能写和事件处理程序并在同一个函数下写这段代码
像这样：``` $('#closeModalBtn').click(function () { $('#confirmOrder').modal('hide'); });```

【解决方案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>

【讨论】：