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">×</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 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中
BootStrap3 的模态框重有一个保存按钮.点击保存如何关闭模态框.隐藏关闭不起作用..
使用css或js关闭时如何向右滑动bootstrap 4模态对话框