滚动我的自定义模态

Question

似乎我无法在我的模态窗口中滚动。我该如何启用它？

这是我的jsfiddle http://jsfiddle.net/n27LckyL/，其中包含我的所有代码＆amp;我的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;
}

问候。