Question

您好我在将srollbars添加到我网站上的模式时遇到了问题。它现在打开很好，但内容远远超过空间。我尝试将overflow:auto添加到下面的代码中，但它只是停止模式打开。

$(function() {
$('#show1').avgrund({
  height: 500,
  holderClass: 'custom',
  showClose: true,
  showCloseText: 'close',
  onBlurContainer: '.container',
  onUnload: function(elem) {
    'Mouthwateringly tasty, right?'
  },
  template: '<img src="img/web-logo.jpg" height="100"/><h2>Brunch</h2><p class="note">9-4 Tues to Fri / 10-4 Sat & Sun</p><p>Pantry breakfast - slow cooked eggs, pantry beans, sourdough toast <span class="price">£6</span><hr class="lessmargin" width="20%"><br/>Syrniki- cottage cheese pancake, yoghurt and jam (GF available) <span class="price">£4</span><hr width="20%"><br/>Avocado, feta chilli and mint, sourdough toast <span class="price">£5.50</span><hr width="20%"><br/>Pantry hash - wild mushrooms, sprout tops, potato, red onion, tomato, fried egg, vegan blood <span class="price">£7.50</span><br/>Wild mushrooms on toast, slow cooked egg <span class="price">£6.50</span><br/>Pantry gravdlax, avocado, toasted rye bread <span class="price">£7</span><br/>Maple bacon or rare breed sausage sandwich <span class="price">£4</span></p><p class="note">Brunch extras - £2 each: Maple bacon / Rare breed sausage / Mushrooms / Avocado / Pantry gravdlax / Halloumi / egg (£1)</p><hr><h2>Lunch</h2><p></p>'
});

我还有一个外部js文件，其中包含以下选项：

options = $.extend(defaults, options);

    return this.each(function () {
        var self = $(this),
            body = $('body'),
            maxWidth = options.width > 640 ? 640 : options.width,
            maxHeight = options.height > 350 ? 350 : options.height,
            template = typeof options.template === 'function' ? options.template(self) : options.template;

        body.addClass('avgrund-ready');

        if ($('.avgrund-overlay').length === 0) {
            body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');
        }

        if (options.onBlurContainer !== '') {
            $(options.onBlurContainer).addClass('avgrund-blur');
        }

        function onDocumentKeyup (e) {
            if (options.closeByEscape) {
                if (e.keyCode === 27) {
                    deactivate();
                }
            }
        }

        function onDocumentClick (e) {
            if (options.closeByDocument) {
                if ($(e.target).is('.avgrund-overlay, .avgrund-close')) {
                    e.preventDefault();
                    deactivate();
                }
            } else if ($(e.target).is('.avgrund-close')) {
                    e.preventDefault();
                    deactivate();
            }
        }

        function activate () {
            if (typeof options.onLoad === 'function') {
                options.onLoad(self);
            }

            setTimeout(function () {
                body.addClass('avgrund-active');
            }, 100);

            var $popin = $('<div class="avgrund-popin ' + options.holderClass + '"></div>');
            $popin.append(template);
            body.append($popin);

            $('.avgrund-popin').css({
                'width': maxWidth + 'px',
                'height': maxHeight + 'px',
                'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
                'margin-top': '-' + (maxHeight / 2 + 10) + 'px'
            });

            if (options.showClose) {
                $('.avgrund-popin').append('<a href="#" class="avgrund-close">' + options.showCloseText + '</a>');
            }

            if (options.enableStackAnimation) {
                $('.avgrund-popin').addClass('stack');
            }

            body.bind('keyup', onDocumentKeyup)
                .bind('click', onDocumentClick);
        }

        function deactivate () {
            if (typeof options.onClosing === 'function') {
                if (!options.onClosing(self)) {
                    return false;
                }
            }

            body.unbind('keyup', onDocumentKeyup)
                .unbind('click', onDocumentClick)
                .removeClass('avgrund-active');

            setTimeout(function () {
                $('.avgrund-popin').remove();
            }, 500);

            if (typeof options.onUnload === 'function') {
                options.onUnload(self);
            }
        }

        if (options.openOnEvent) {
            self.bind(options.setEvent, function (e) {
                e.stopPropagation();

                if ($(e.target).is('a')) {
                    e.preventDefault();
                }

                activate();
            });
        } else {
            activate();
        }
    });
};

我的经验对JS来说不是很好，所以任何帮助都会非常感激。

Answer 1

options = $.extend(defaults, options);

    return this.each(function () {
        var self = $(this),
            body = $('body'),
            maxWidth = options.width > 640 ? 640 : options.width,
            maxHeight = options.height > 350 ? 350 : options.height,
            template = typeof options.template === 'function' ? options.template(self) : options.template;

        body.addClass('avgrund-ready');

        if ($('.avgrund-overlay').length === 0) {
            body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');
        }

        if (options.onBlurContainer !== '') {
            $(options.onBlurContainer).addClass('avgrund-blur');
        }

        function onDocumentKeyup (e) {
            if (options.closeByEscape) {
                if (e.keyCode === 27) {
                    deactivate();
                }
            }
        }

        function onDocumentClick (e) {
            if (options.closeByDocument) {
                if ($(e.target).is('.avgrund-overlay, .avgrund-close')) {
                    e.preventDefault();
                    deactivate();
                }
            } else if ($(e.target).is('.avgrund-close')) {
                    e.preventDefault();
                    deactivate();
            }
        }

        function activate () {
            if (typeof options.onLoad === 'function') {
                options.onLoad(self);
            }

            setTimeout(function () {
                body.addClass('avgrund-active');
            }, 100);

            var $popin = $('<div class="avgrund-popin ' + options.holderClass + '"></div>');
            $popin.append(template);
            body.append($popin);

            $('.avgrund-popin').css({
                'width': maxWidth + 'px',
                'height': maxHeight + 'px',
                'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
                'margin-top': '-' + (maxHeight / 2 + 10) + 'px',
                'overflow': 'auto'
            });

            if (options.showClose) {
                $('.avgrund-popin').append('<a href="#" class="avgrund-close">' + options.showCloseText + '</a>');
            }

            if (options.enableStackAnimation) {
                $('.avgrund-popin').addClass('stack');
            }

            body.bind('keyup', onDocumentKeyup)
                .bind('click', onDocumentClick);
        }

        function deactivate () {
            if (typeof options.onClosing === 'function') {
                if (!options.onClosing(self)) {
                    return false;
                }
            }

            body.unbind('keyup', onDocumentKeyup)
                .unbind('click', onDocumentClick)
                .removeClass('avgrund-active');

            setTimeout(function () {
                $('.avgrund-popin').remove();
            }, 500);

            if (typeof options.onUnload === 'function') {
                options.onUnload(self);
            }
        }

        if (options.openOnEvent) {
            self.bind(options.setEvent, function (e) {
                e.stopPropagation();

                if ($(e.target).is('a')) {
                    e.preventDefault();
                }

                activate();
            });
        } else {
            activate();
        }
    });
};

需要添加

$('.avgrund-popin').css({
    'width': maxWidth + 'px',
    'height': maxHeight + 'px',
    'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
    'margin-top': '-' + (maxHeight / 2 + 10) + 'px',
    'overflow': 'auto'
});

将滚动条添加到模态

1 个答案: