Android上的Bootstrap 3長模式滾動背景

Question

我有一個很長的模式，並沒有完全顯示在我的Android移動設備上，按鈕是在屏幕下方的波紋管，模態不會滾動，但灰色背景在模態後面，是否有任何css/js技巧來鎖定背景並允許模態在顯示此模式時滾動？

Answer 1

這是假設與Bootstrap 3固定，但它不適合我。我能夠用-webkit-overflow-scrolling CSS屬性和設置我的模態的最大高度來解決機智問題。由於我想要我的模式來填充整個屏幕，我不得不連接一些JavaScript來檢測移動設備，並將我的.modal內容的最大高度設置爲我設備的視口高度。沒有解決這個使用一種稱爲jRespond庫：

這個CSS的情態動詞添加

@media (max-width: $screen-xs-max) { 
    .modal-dialog { 
    .modal-content { 
     -webkit-overflow-scrolling: touch; 
     overflow-y: auto; 
    } 
    } 
} 

添加jRespond到應用程序

https://github.com/ten1seven/jRespond/edit/master/js/jRespond.js

下面的代碼添加到您的main.js腳本

/* This code handles the responsive modal for mobile */ 
    var jRes = jRespond([{ 
     label: 'handheld', 
     enter: 0, 
     exit: 767 
    }]); 

    jRes.addFunc({ 
     breakpoint: 'handheld', 
     enter: function() { 
     $('.modal-content').css('max-height', $(window).height()); 
     $(window).on('orientationchange', function() { 
      $('.modal-content').css('max-height', $(window).height()); 
     }); 
     }, 
     exit: function() { 
     $('.modal-content').css('max-height', ""); 
     $(window).off('orientationchange'); 
     } 
    }); 

Answer 2

這可能是因爲模式的階級地位的是固定的... 嘗試把下面的代碼到你的CSS文件，它是爲我工作...

@media (max-width: 767px) { 
    .modal { 
     position: absolute; 
     overflow:visible; 
    } 
    .modal-open { 
     overflow:visible; 
    } 
}