使用 Javascript 隐藏具有淡出效果的 Bootstrap 模态答案

【问题标题】：Hide Bootstrap modal with fade out effect using Javascript使用 Javascript 隐藏具有淡出效果的 Bootstrap 模态
【发布时间】：2017-01-03 03:32:54
【问题描述】：

我有一个基本的引导模式来登录，当我点击提交时它不会自行关闭。我用this simple jquery解决了它：

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

但我也希望模态框使用引导程序的淡入淡出类正确淡出 - 目前不会发生，它会立即被隐藏。

我该怎么做？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用 jQuery :

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

【讨论】：

【解决方案4】：

确保您的 modal 的 HTML 具有 .fade 类，其余的由 Bootstrap 完成，per their documentation：

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

如果您仍然遇到问题，您将不得不发布更多代码。

【讨论】：