0
您好,我無法將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,所以任何幫助將不勝感激。
你在哪裏嘗試添加'溢出:auto'到使模態不顯示在所有的代碼? – krillgar
很難說沒有html,但嘗試'$(「。container」).css(「overflow」,「auto」);'調用'avgrund'後 – Yeti