javascript - 如何在 Modal 内滚动

Question

我的网站上有一个模态框，里面有内容。但是，我注意到在手机上我无法在内容中滚动。它似乎是“固定的”，没有滚动条。

有人可以帮忙吗？

我的 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 个部分组成，即 Header、Body 和 Footer。

现在模态框在默认情况下是不响应的，但这可以使用 JQuery 实现。

您可以做的是，为模态分配一个默认高度，并在 ** Page Load 事件即 $(document).ready()** 和 ** Window Resize 事件即 $(window).resize 上更新此高度()**

现在在设置高度时，你可以试试这个:

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

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

现在您只需为 Body div 设置 overflow: auto。