android - Android上的Bootstrap 3长模态滚动背景

Question

我有一个长模式，没有完全显示在我的 android 移动设备上，按钮位于屏幕底部，模式根本不滚动，但模式后面的灰色背景会滚动，是否有任何 css/js锁定背景并允许模式在显示此模式时滚动的技巧？

Answer 1

这可能是因为模态类位置是固定的...尝试将下面的代码放入您的 css 文件中，这对我有用...

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

Answer 2

这应该用 Bootstrap 3 修复，但它对我不起作用。我能够结合使用 -webkit-overflow-scrolling CSS 属性和设置模态的最大高度来修复机智。因为我希望我的模态填满整个屏幕，所以我必须连接一些 javascript 来检测移动设备，并将我的 .modal-content 的最大高度设置为我的设备的视口高度

以下是我使用名为 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');
      }
    });