引导Android上的3个长情态滚动背景 [英] Bootstrap 3 long modal scrolling background on Android

问题描述

我还有很长的模式，这并不完全在我的Andr​​oid移动设备上显示的按钮波纹管在屏幕的底部，该模式根本不滚动，但语气背后的灰色背景呢，有什么CSS / JS伎俩锁定背景，并允许在显示这一个模态滚动？

I have a long modal that doesn't fully display on my android mobile device, the buttons are bellow the bottom of the screen, the modal doesn't scroll at all but the grayish background behind the modal does, is there any css/js trick to lock the background and allow the modal to scroll while this one is displayed ?

推荐答案

这是应该的是固定的自举3，但它不是为我工作。我是能够解决的机智与-webkit-溢出滚动CSS属性和设置模式我的最大高度的组合。因为我希望我的语气充满了整个屏幕，我不得不线了一些JavaScript来检测移动设备和设置我.modal内容到我的设备的视口高度

This was supposed to be fixed with Bootstrap 3, but it is not working for me. I was able to fix wit with a combination of -webkit-overflow-scrolling CSS property and setting the max-height of my modal. Since I wanted my modal to fill the whole screen, I had to wire up some javascript to detect mobile devices and the set the max-height of my .modal-content to the viewport height of my device

下面是我做这个使用一种称为jRespond库来解决：

Here is what I did to solve this using a library called 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/主/ JS / jRespond.js

添加以下code你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');
      }
    });

这篇关于引导Android上的3个长情态滚动背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！