Tarayıcı geri düğmesine tıklandığında, önyükleme modal kapatılır, ancak modal düşümü

Question

olarak kalır. Önyükleme ile Backbone kullanıyorum. Sorun uygulamadan geçtiğinizde ve bir noktada bootstrap modal penceresini açar ve geri düğmesine basarsanız, modal penceresi kapanır ancak modal arka plan div (modal-backdrop) kalır ve kaybolmaz. Tüm ekranı kaplar ve hiçbir şeye tıklayamazsınız. Normalde modal-backdrop div'in html'den kaldırıldığını ve bu durumda kaldığını fark ettim.

Bu çözümü web'de arıyordum ve benzer şeyler buldum, ancak hiçbiri tarayıcı geri düğmesine basılmadı.

Bu div'i kaldırmak için tarayıcı geri düğmesi olayını ve kullanıcı jquery'i yakalamayı düşündüm, ancak bu gerçekten iyi bir çözüm değil.

Birisi bu sorun için bazı çözümlere işaret edebilir mi? Ya da sonunda niçin böyle olduğunu söyle.

DÜZENLEME: geriye düğmeye basıldığında , modal hide.bs.modal olayı atmaz, bu yüzden Ardından HTML5 popstate olay ve yangın dinleyebilirsiniz yakalamak ve modal-arka div

Answer 1

kaldırmak olamaz modal-zeminin görüntülendiğini görürseniz, hide.bs.modal olayı.

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

Ya History.js aracı kullanmak ve geri düğmesi olayı yakalamak events kalacak ve sonra önceki çözüm olarak aynı şeyi.

Answer 2

Bu sorunu, AngularJS_v1.4.7 ve Bootstrap_v3.0 kullanılarak geliştirilen Web ve Mobil Uygulama ile karşılaştık. Beklenen davranış (uygulama genelinde), Popup kapanmalı ve sayfa geçişi OLMAMALIDIR. Diğer bir deyişle, geri düğmesi sadece açılır pencereyi kapatır ve başka bir şey olmaz. düzeltme Aşağıda

//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(); 
     } 
    }); 

Bu düzeltme, başarıyla

masaüstünde
• Chrome tarayıcısı
• Windows 8.1 Telefon
• Android Lollipop

Answer 3

test edildi, iyi çalıştı Bunu dene. benim için.

benim yeni uygulamada bir hata bulmak için

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