我有一个很长的模态,没有完全显示在我的 Android移动设备上,按钮在屏幕下方,模态根本不滚动,但模态背后的灰色背景,是否有任何CSS / js锁定背景并允许模态在显示此模式时滚动的技巧?
以下是我使用名为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'); } });