Bootstrap 4模式未正确关闭隐藏 [英] Bootstrap 4 Modal Not Closing Properly On Hide

问题描述

我在bootstrap 3中工作但是在bootstrap 4（测试版）中我没有运气。

I had this working in bootstrap 3 but in bootstrap 4 (beta) I've had no luck.

模态本身编码如下（简单符号）形式）

The modal itself is coded like the following (simple sign in form)

<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>

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

And it's opened with a link in a bootstrap nav bar

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

它打开正常，可以毫无问题地被解雇。问题是我提交的时候。
首先我执行一个ajax请求，如果它失败没有任何反应，但是当它成功时，模态被隐藏使用：

It opens fine and can be dismissed with no problem. The issue is when I submit it. First I perform an ajax request, if it fails nothing happens, but when it succeeds the modal is hidden using:

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

以前工作正常bootstrap 3，但现在背景不会消失，它会阻止我做任何其他事情，直到刷新。我也尝试过切换，但没有变化。

Which used to work fine in bootstrap 3, but now the backdrop isn't going away and it locks me out from doing anything else until refresh. I tried toggle as well but no change.

我尝试添加

data-backdrop="false"

到摆脱背景问题的模态，但随后我得到一个新问题，我不能再简单地在模态窗口外单击以解除它。它在视觉上看起来也差很多。

to the modal which gets rid of the backdrop issue, but then I get a new issue that I can no longer simply click outside the modal window to dismiss it. It also looks a lot worse visually.

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

Also a second problem which is probably related to the first issue is that after I manually hide the modal, the sign in button wont open any more. If I click it a bunch at best it will flash on the screen and go away.

真的很困惑为什么它从bootstrap 3切换到4这么多。
我正在遵循文档并尽可能准确地匹配应该如何调用。

Really confused why it broken so much switching from bootstrap 3 to 4. I'm following the documentation and matching as much as possible exactly how things should be called.

推荐答案

在为此争吵之后虽然我发现问题是因为我的webpack配置仍然包含一个使用bootstrap-sass的剩余部分。所以我基本上同时拥有引导程序3和4，这几乎引起了一切。在完全删除bootstrap-sass后，表单现在正常工作。

After fighting this for a while I discovered the issue was because my webpack configuration still contained a leftover part that was using bootstrap-sass. So I basically had both bootstrap 3 and 4 at the same time and that caused pretty much everything. After completely removing bootstrap-sass the form now properly works.

这篇关于Bootstrap 4模式未正确关闭隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！