Question

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

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

SELECT 
    (select count(*) As sum_yes from dashboard where overtime = 'Yes' ) as yes,
    (select count(*) As sum_no from dashboard where overtime = 'No' ) as no, 
    (SELECT quarter(date) as quarter from dashboard) 
group by quarter

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

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

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

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

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

我尝试添加

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

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

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

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

Answer 1

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

Answer 2

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

Bootstrap 4模式未正确关闭隐藏

2 个答案: