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這麼多。我正在按照儘可能多的文檔和匹配確切應該如何調用。

來源

2017-10-08 canpan14

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後，表單現在可以正常工作。

來源

2017-10-09 20:08:26 canpan14

Bootstrap 4模式不能正常關閉隱藏

回答

相關問題