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

Posted

技术标签:

【中文标题】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 后,表单现在可以正常工作了。

【讨论】:

以上是关于Bootstrap 4 模态在隐藏时未正确关闭的主要内容,如果未能解决你的问题,请参考以下文章

BootStrap 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中

Bootstrap 折叠组件在单击时未关闭菜单

BootStrap3 的模态框重有一个保存按钮.点击保存如何关闭模态框.隐藏关闭不起作用..

使用css或js关闭时如何向右滑动bootstrap 4模态对话框

Bootstrap 模态隐藏在 Laravel 7 中不起作用

python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件