Bootstrap 4模式不能正常关闭隐藏

问题描述：

我在bootstrap 3中工作，但在bootstrap 4（测试版）中我没有运气。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')

其中用于引导3做工精细，但现在的大背景下是不会消失和它阻止我做任何事情直到刷新。我试过切换，但没有改变。

我尝试添加

data-backdrop="false"

到摆脱背景问题的模式，但后来我得到一个新的问题，我不能再简单地点击模态窗口外将其关闭。它在视觉上看起来很糟糕。

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

真的很困惑为什么它打破了从引导3切换到4这么多。我正在按照尽可能多的文档和匹配确切应该如何调用。

BS4模式工作正常，请参阅[this codepen]（https://codepen.io/fen1x/pen/PJRGBr）。此外，你在一个地方有'＃signUpModal'，在另一个地方有'＃signInModal' - 在代码中检查ID-S。 – fen1x

哎呀，这是另一种非常相似的模式，只是复制在错误的链接。是的，它也适用于我的代码。这就是为什么我放弃并在这里问，只是希望有人指出一些东西来检查我还没有想到。同时在我的index.scss中添加以下两行代码有助于页面获得所有扭曲的$ icon-font-path：'〜bootstrap-sass/assets/fonts/bootstrap /'; @import'〜bootstrap-sass/assets/stylesheets/bootstrap'; – canpan14

你可以尝试移除'fade'类，看看它是否有效吗？这对我来说是有效的，但我还没有找到一个带*动画的解决方案。 – Seika85

答

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

Bootstrap 4模式不能正常关闭隐藏

相关推荐