2014-09-10 67 views
9

我正在使用Backbone和引導程序。問題是當你通過應用程序並在某些時候打開引導模式窗口並按回來按鈕時,模式窗口關閉,但模態背景div(模態背景)保持不消失。它覆蓋整個屏幕,你不能點擊任何東西。我注意到,當你關閉模式通常情況下背景div被從html中刪除,並在這種情況下,它保持。當單擊瀏覽器後退按鈕時,引導模式已關閉,但模態後退保持

我在網上搜索這個解決方案,發現類似的東西,但沒有一個是瀏覽器後退按鈕的潮流。

我想過捕捉瀏覽器後退按鈕事件和用戶jquery刪除該div,但這並不是很好的解決方案。

有人可以指出這個問題的一些解決方案嗎?或者最後告訴我爲什麼會發生這種情況。

編輯: 當按下後退按鈕,模式不會引發hide.bs.modal事件,所以我不能抓住它,並刪除模式,背景DIV

+0

+1在我的新應用程序中查找錯誤;) – 2014-09-11 19:47:14

回答

4

您可以收聽到HTML5 popstate事件,然後火如果您發現顯示模式背景,則輸入hide.bs.modal事件。

$(window).on('popstate', function() { 
    alert('Back button was pressed.'); 
}); 

或者使用History.js工具,它是events趕上後退按鈕事件,然後做同樣爲以前的解決方案。

+0

工程就像一個魅力! – 2014-09-11 19:47:47

+0

不要忘記用'$(window).off()'關閉,否則你會有殭屍聽衆! – mix3d 2015-05-13 14:20:39

5

我們在使用AngularJS_v1.4.7和Bootstrap_v3.0開發的Web和移動應用程序中遇到了這個問題。 預期的行爲(整個應用程序)是,Popup應該關閉,並且頁面轉換不應該發生。換句話說,後退按鈕只是關閉彈出窗口而沒有其他任何東西。

修正以下的罰款,

//Detect location change 
$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) { 
     // Select open modal(s) 
     var $openModalSelector = $(".modal.fade.in"); 
     if(($openModalSelector.data('bs.modal') || {}).isShown == true){ 
      // Close open modal(s) 
      $openModalSelector.modal("hide"); 
      // Prevent page transition 
      event.preventDefault(); 
     } 
    }); 

此修復程序進行了測試成功上,

    在桌面上
  • Chrome瀏覽器
  • 的Windows 8.1手機
  • 運行Android Lollipop
+0

我可以驗證這個作品。還要確保你在主控制器內使用它,以便它出現在所有頁面上。 – 2016-12-08 16:06:22

1

試試這個。它的作品爲了我。

<script type="application/javascript"> 
    $(window).on('popstate', function() { 
     $('.modal').modal('hide'); 
     $(".modal-backdrop").remove(); 
     $(".in").remove(); 
    }); 
</script> 
+0

工作。謝謝! – 2017-06-12 16:17:00

相關問題