How to scroll inside Modal

Problem

I have a Modal on my site with content inside it. However, I've noticed on Mobile phones I can't scroll inside the content. It seems 'fixed' with no scrollbar.

Can someone please help?

My JSFiddle is here: http://jsfiddle.net/g1kbvn0s/embedded/result/ from here you can see my CSS and Javascript. I've also attached my CSS below:

/* 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;
        }

Many thanks for any assistance :-)

Problem courtesy of: michaelmcgurk

Solution

A modal consists of 3 sections viz., Header, Body and Footer.

Now a modal is not responsive by default, but this is achievable using JQuery.

What you can do is, assign a default height to modal and update this height on ** Page Load event i.e. $(document).ready()** and on ** Window Resize event i.e. $(window).resize()**

Now while setting the height, you can try this:

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

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

Now you just have to set overflow: auto for Body div.

Solution courtesy of: Rajesh

Discussion

You change attribute "overflow:hidden" in #cinema-overlay => "overflow:auto"

#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;
}
Discussion courtesy of: Ryan Nghiem

This recipe can be found in it's original form on Stack Over Flow.