滚动我的自定义模态内

Question

看来我不能在我的模态窗口内滚动。我如何启用它？

这里是我的jsfiddlehttp://jsfiddle.net/n27LckyL/其中包含我的所有代码&我的javascript：

jQuery(document).ready(function($) { 
    $(".cinema-viewer").cinemaviewer(); 
}); 


(function(window, document, $, undefined) { 

    $.cinemaviewer = function(elem, options) { 

     var defaults = { 
      useCSS: true, 
      initialIndexOnArray: 0, 
      hideBarsDelay: 3000, 
      videoMaxWidth: 1140, 
      vimeoColor: 'CCCCCC', 
      beforeOpen: null, 
      afterClose: null 
     }, 

      plugin = this, 
      elements = [], 
      selector = elem.selector, 
      $selector = $(selector), 
      isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints, 
      supportSVG = !! (window.SVGSVGElement), 
      winWidth = window.innerWidth ? window.innerWidth : $(window).width(), 
      winHeight = window.innerHeight ? window.innerHeight : $(window).height(); 

      html = '<div id="cinema-overlay">\ 
         <div class="row" id="cinema-top">\ 
          <div class="small-8 medium-6 columns social-target">\ 
          </div>\ 
          <div class="small-4 medium-6 columns end">\ 
           <ul class="naked inline social-icons right">\ 
            <li><a href="" class="cinema-toggle" id="cinema-toggle"><span class="sr-text">change colour</span></a></li>\ 
            <li><a href="" class="icon icon-exit" id="cinema-close"><span class="sr-text">exit</span></a></li>\ 
           </ul>\ 
          </div>\ 
         </div>\ 
         <div id="cinema-slider"></div>\ 
         <div id="cinema-info">\ 
          <div class="row">\ 
           <div class="small-2 medium-1 columns">\ 
            <a id="cinema-prev" class="icon icon-arrow-left dir-arrow"><span class="sr-text">previous slide</span></a>\ 
           </div>\ 
           <div class="small-2 small-push-8 medium-1 medium-push-10 columns">\ 
            <a id="cinema-next" class="icon icon-arrow-right dir-arrow"><span class="sr-text">next slide</span></a>\ 
           </div>\ 
           <div class="small-8 small-pull-2 medium-5 medium-unpull columns">\ 
            <div class="title"></div>\ 
            <div class="artist"></div>\ 
           </div>\ 
           <div class="small-12 medium-1 columns item-controls" >\ 
           </div>\ 
           <div class="small-12 medium-4 columns">\ 
            <span class="price"></span>\ 
           </div>\ 
          </div>\ 
          <div class="row" id="related">\ 
           <div class=" small-2 medium-1 columns">\ 
            <a id="related-prev" class="icon icon-arrow-left dir-arrow"><span class="sr-text">previous slide</span></a>\ 
           </div>\ 
           <div class="small-8 medium-10 columns related-container">\ 
            <ul class="cinema-related">\ 
            <p>&nbsp;</p>\ 
            <p>&nbsp;</p>\ 
            <p>&nbsp;final test</p>\ 
            </ul>\ 
           </div>\ 
           <div class="small-2 medium-1 columns">\ 
            <a id="related-next" class="icon icon-arrow-right dir-arrow"><span class="sr-text">next slide</span></a>\ 
           </div>\ 
          </div>\ 
         </div>\ 
        </div>'; 


     plugin.settings = {} 

     plugin.init = function() { 

      plugin.settings = $.extend({}, defaults, options); 

      $selector.bind('click touchend', function(e) { 
       elements = []; 
       var index, relType, relVal; 

       if (!relVal) { 
        relType = 'rel'; 
        relVal = $(this).attr(relType); 
       } 

       if (relVal && relVal !== '' && relVal !== 'nofollow') { 
        $elem = $selector.filter('[' + relType + '="' + relVal + '"]'); 
       } else { 
        $elem = $(selector); 
       } 

       $elem = $(selector); 

       $elem.each(function(index) { 

        var target = $(this), 
         href = target.attr('href'), 
         id = target.data('picture-id'); 

         elements.push({ 
          id: id, 
          href: href 
         }); 

       }); 

       console.log(elements) 
       index = $elem.index($(this)); 
       e.preventDefault(); 
       e.stopPropagation(); 
       ui.target = $(e.target); 
       ui.init(index); 

      }); 

     } 

     var ui = { 

      init: function(index) { 

       $.cinemaviewer.isOpen = true; 
       this.build(index); 
       this.openSlide(index); 
       this.openMedia(index); 
       this.preloadMedia(index + 1); 
       this.preloadMedia(index - 1); 
      }, 

      build: function(index) { 
       var $this = this; 

       $('body').append(html); 
       $('body').addClass('cinema-open'); 

       $.each(elements, function() { 
        $('#cinema-slider').append('<div class="slide"></div>'); 
       }); 

       $this.setDim(); 
       $this.actions(); 
       $this.keyboard(); 
       $this.gesture(); 
       $this.get_sm(index); 
       $this.resize(); 

      }, 

     }; // end ui 

     plugin.init(); 

    }; 

    $.fn.cinemaviewer = function(options) { 
     var cinemaviewer = new $.cinemaviewer(this, options); 
    }; 

}(window, document, jQuery)); 

感谢任何指针。

Answer 1

我不明白，如果“模态”是黑匣子。如果是这样，

为什么不将overflow-y: auto添加到您的#cinema-overlay css？

它为我工作！ http://jsfiddle.net/n27LckyL/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; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
    overflow-y: auto; 
} 

问候。