Bootstrap 如何在show.bs.模式事件中隐藏引导模式？

nwwlzxa7 于 2023-04-27 发布在 Bootstrap

关注(0)|答案(2)|浏览(122)

下面是一个代码示例：

let order_modal = document.getElementById('order');

order_modal.addEventListener('show.bs.modal', function (e) {
    bootstrap.Modal.getInstance(order_modal).hide();
}, false);

当我打开模式时，它打开了，.hide（）方法不起作用。
如果我改变事件'显示.bs.模态'它的工作，但模态 Flink 。

twitter-bootstrap

来源：https://stackoverflow.com/questions/76112037/how-to-hide-bootstrap-modal-in-show-bs-modal-event

2条答案

按热度按时间

thtygnil1#

你可以使用Event.preventDefault()来阻止show.bs.modal事件的执行：

const modal = document.getElementById("modal");
        
modal.addEventListener("show.bs.modal", function(e){
  e.preventDefault();
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"     crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<button type="button" data-bs-toggle="modal" data-bs-target="#modal">
  Launch modal
</button>
  
<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button data-bs-dismiss="modal">
          Close Modal
        </button>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-27

vom3gejh2#

我正在使用事件单击按钮来关闭：）））我认为这不是最好的解决方案，但它对我有效。

赞(0）回复(0）举报 2023-04-27