Как прокрутить внутри Модальный

Question

У меня есть модальный на моем сайте с содержимым внутри него. Тем не менее, я заметил, что на мобильных телефонах я не могу прокручивать содержимое. Кажется «фиксированным» без полосы прокрутки.

Может кто-нибудь помочь?

My JSFiddle есть здесь: http://jsfiddle.net/g1kbvn0s/embedded/result/ отсюда вы можете увидеть мои CSS и Javascript. Я также закрепил CSS ниже:

/* line 1, ../sass/components/_reset.scss */ 
div, ul, ol, h1, h2, h3, h4, h5, h6, p, html, body { 
    margin: 0; 
    padding: 0; 
} 

/* line 1, ../sass/components/_globals.scss */ 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* line 7, ../sass/components/_globals.scss */ 
.left { 
    float: left; 
} 

/* line 11, ../sass/components/_globals.scss */ 
.right { 
    float: right; 
} 

/* line 15, ../sass/components/_globals.scss */ 
.center { 
    margin: 0 auto; 
} 

/* line 24, ../sass/components/_globals.scss */ 
ul.naked, ol.naked { 
    list-style: none; 
} 
/* line 30, ../sass/components/_globals.scss */ 
ul.horizontal, ul.inline, ol.horizontal, ol.inline { 
    overflow: hidden; 
    zoom: 1; 
} 
/* line 31, ../sass/components/_globals.scss */ 
ul.horizontal li, ul.inline li, ol.horizontal li, ol.inline li { 
    float: left; 
} 

/* line 42, ../sass/components/_globals.scss */ 
.text-left { 
    text-align: left; 
} 

/* line 42, ../sass/components/_globals.scss */ 
.text-right { 
    text-align: right; 
} 

/* line 42, ../sass/components/_globals.scss */ 
.text-center { 
    text-align: center; 
} 

/* line 76, ../sass/components/_globals.scss */ 
.display-table { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
/* line 81, ../sass/components/_globals.scss */ 
.display-table .center-center { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

/* line 3, ../sass/components/_type.scss */ 
body, .primary-font, p { 
    font-family: "Raleway"; 
    font-weight: 300; 
    font-size: 1em; 
    line-height: 1.25em; 
    color: #949494; 
    -webkit-font-smoothing: antialiased; 
} 

     /* line 863, ../sass/_layout.scss */ 
     html.cinema-viewer { 
      overflow: hidden !important; 
     } 

     /* line 867, ../sass/_layout.scss */ 
     #cinema-overlay img { 
      border: none !important; 
     } 

     /* line 871, ../sass/_layout.scss */ 
     #cinema-overlay { 
      background-color: rgba(0, 0, 0, 0.95); 
      width: 100%; 
      height: 100%; 
      position: fixed; 
      top: 0; 
      left: 0; 
      z-index: 99999 !important; 
      overflow: hidden; 
      -webkit-user-select: none; 
      -moz-user-select: none; 
      user-select: none; 
     } 
     /* line 884, ../sass/_layout.scss */ 
     #cinema-overlay .cinema-toggle { 
      width: 41px; 
      height: 24px; 
      display: block; 
      background-image: url("../images/toggle-black.png"); 
      margin-right: 10px; 
     } 
     /* line 891, ../sass/_layout.scss */ 
     #cinema-overlay.white { 
      background-color: rgba(255, 255, 255, 0.95); 
     } 
     /* line 894, ../sass/_layout.scss */ 
     #cinema-overlay.white #cinema-top .icon, 
     #cinema-overlay.white .dir-arrow { 
      color: #404040; 
     } 
     /* line 899, ../sass/_layout.scss */ 
     #cinema-overlay.white #cinema-top .icon:hover, 
     #cinema-overlay.white .dir-arrow:hover { 
      color: #0096AA; 
     } 
     /* line 905, ../sass/_layout.scss */ 
     #cinema-overlay.white .cinema-toggle { 
      background-image: url("../images/toggle-white.png"); 
     } 
     /* line 912, ../sass/_layout.scss */ 
     #cinema-overlay #cinema-info .item-controls .cv { 
      display: none; 
     } 
     /* line 915, ../sass/_layout.scss */ 
     #cinema-overlay #cinema-info .item-controls a { 
      width: 100%; 
      text-align: center; 
      display: block; 
      margin-bottom: 0.25em; 
     } 
     /* line 921, ../sass/_layout.scss */ 
     #cinema-overlay #cinema-info .item-controls .icon { 
      font-size: 2em; 
      color: #949494; 
     } 
     /* line 925, ../sass/_layout.scss */ 
     #cinema-overlay #cinema-info .item-controls .icon:hover, #cinema-overlay #cinema-info .item-controls .icon.active { 
      color: #0096AA; 
     } 
     /* line 930, ../sass/_layout.scss */ 
     #cinema-overlay #cinema-info .item-controls .ajax-loading { 
      display: none; 
     } 

Большое спасибо за любую помощь :-)

Answer 1

Модальный состоит из 3-х секций, а именно: Заголовок, нижний колонтитул.

Теперь модаль не реагирует по умолчанию, но это возможно с помощью JQuery.

Что вы можете сделать, назначить высоту по умолчанию для модального и обновить эту высоту на ** Событие загрузки страницы, т.е. $ (document) .ready() ** и на ** Событие изменения окна, то есть $ (окно). размер() **

Теперь при установке высоты, вы можете попробовать это:

/* This will prevent modal from overflowing. */ 
var modalHeight = $(window).height - 100; 

/* Padding space for footer */ 
var bodyHeight = modalHeight - 100; 

Теперь вы просто должны установить переполнения: авто для тела DIV.

Answer 2

Вы можете изменить атрибут «переполнение: скрытый» в # кино-наложению => «переполнение: авто»

#cinema-overlay { 
background-color: rgba(0, 0, 0, 0.95); 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
z-index: 99999 !important; 
overflow: auto; 
-webkit-user-select: none; 
-moz-user-select: none; 
user-select: none; 
}