使用Javascript实现Bootstrap模态框淡出效果并隐藏。

Question

我有一个基本的Bootstrap模态框用于登录，但是当我点击提交时它并不会自动关闭。我使用了这个简单的jQuery解决了这个问题：

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

但我也希望模态框能够使用Bootstrap的淡出类（fade class）逐渐消失 - 目前并没有发生，它会立即隐藏。

我该怎么做呢？

- Florian Bienefelt

Answer 1

$('#myModal').delay(1000).fadeOut(450);

 setTimeout(function(){
    $('#myModal').modal("hide");
 }, 1500);

- floooat

Answer 2

您可以将淡出效果的持续时间传递给fadeout函数，然后将回调函数作为第二个参数传递。在回调函数的主体中，您可以隐藏模态窗口。

   $('#myModal').fadeOut(500,function(){
                $('#myModal').modal('hide');
             });

- Yannick Y

Answer 3

确保你的模态框 HTML 中有 .fade 类，Bootstrap 将会自动完成其余部分，详见官方文档：

<div class="modal fade">
  Modal content here
</div>

如果您仍然遇到问题，您需要发布更多的代码。

- serraosays

Answer 4

使用 jQuery ：

$('#myModal').fadeOut();

- DjaouadNM

---

请添加更多信息。不鼓励仅有代码和“试试这个”的答案，因为它们没有可搜索的内容，并且没有解释为什么某人应该“试试这个”。 - abarisone

我认为很明显，$.fadeOut()只是淡出$element，不需要解释。 - DjaouadNM

使用jQuery的fadeOut()在Bootstrap 4中无法正常工作 - 黑色覆盖层仍然存在... - zak

Answer 5

这对我有用：

$("#id").attr("data-dismiss","modal");

- mysabu