Bootstrap 4 模态在隐藏时未正确关闭

Posted 2023-03-05

【中文标题】Bootstrap 4 模态在隐藏时未正确关闭

【英文标题】：Bootstrap 4 Modal Not Closing Properly On Hide

【发布时间】：2018-03-19 18:33:35

【问题描述】：

我在 bootstrap 3 中可以正常工作，但在 bootstrap 4（测试版）中我没有运气。

模态本身的编码如下（简单的登录表单）

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signInModalLabel">Sign In</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class='form-horizontal' role="form" id='signIn'>
        <div class="modal-body">
            <div class="form-group">
              <label class="control-label col-2" for="email">Email:</label>
              <div class="col-10">
                <input type="text" class="form-control" name="credentials[email]" placeholder="Enter email" required>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-2" for="pwd">Password:</label>
              <div class="col-10">
                <input type="password" class="form-control" name="credentials[password]" placeholder="Enter password" required>
              </div>
            </div>
        </div>
        <div class="modal-footer">
          <span class="badLoginAttempt" id="badLoginAttempt"></span>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Sign In</button>
        </div>
      </form>
    </div>
  </div>
</div>

它是通过引导导航栏中的链接打开的

<a class="nav-link" data-toggle="modal" href="#signInModal">Sign In</a>

它可以正常打开，并且可以毫无问题地关闭。问题是我何时提交。 首先我执行一个 ajax 请求，如果它失败了，什么也没有发生，但是当它成功时，模式被隐藏使用：

$('#signInModal').modal('hide')

以前在 bootstrap 3 中运行良好，但现在背景并没有消失，它让我无法做任何其他事情，直到刷新。我也尝试过切换，但没有任何变化。

我尝试添加

data-backdrop="false"

到摆脱背景问题的模态，但后来我遇到了一个新问题，我不能再简单地在模态窗口之外单击以将其关闭。视觉上看起来也差很多。

另外一个可能与第一个问题有关的问题是，在我手动隐藏模式后，登录按钮将不再打开。如果我最多单击它一堆，它会在屏幕上闪烁并消失。

真的很困惑，为什么从引导程序 3 切换到 4 时会中断这么多。 我正在关注文档并尽可能准确地匹配应该如何调用。

【问题讨论】：

BS4 模态运行良好，请参阅this codepen。此外，您在一个地方有 #signUpModal，在另一个地方有 #signInModal - 检查代码中的 id-s。

哎呀，这是另一个非常相似的模式，只是复制到了错误的链接中。是的，它在代码笔中也适用于我。这就是为什么我放弃并在这里问的原因，只是希望有人指出一些我还没有想到的检查。还将以下两行添加到我的 index.scss 会有所帮助，但是页面会变得很混乱 $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; @import '~bootstrap-sass/assets/stylesheets/bootstrap';

您可以尝试删除fade 类，然后看看它是否有效？这对我有用，但我还没有找到 with 动画的解决方案。

不修复它。仍然遗憾地留下不透明的黑色覆盖层。我越来越确定这与我采用 bootstrap 3 模板项目并试图让它使用 bootstrap 4 的事实有关。导致两个引导程序相互争斗的一些奇怪组合。

@Seika85：与 Bootstrap 4 beta 相同。我也想出了“.fade”技巧:)你在恢复淡入淡出动画方面有什么进展吗？

【参考方案1】：

我遇到了同样的问题，但删除 fade 类为我解决了这个问题。

【参考方案2】：

在解决了一段时间后，我发现问题是因为我的 webpack 配置仍然包含使用 bootstrap-sass 的剩余部分。所以我基本上同时拥有 bootstrap 3 和 4，这几乎导致了一切。完全删除 bootstrap-sass 后，表单现在可以正常工作了。