2016-12-15 161 views
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,所以任何幫助將不勝感激。

+0

你在哪裏嘗試添加'溢出:auto'到使模態不顯示在所有的代碼? – krillgar

+0

很難說沒有html,但嘗試'$(「。container」).css(「overflow」,「auto」);'調用'avgrund'後 – Yeti

回答

0
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' 
}); 
+0

謝謝!絕對完美,即使是像我這樣的新手也很容易理解!應該在幾個小時前嘗試過! – Hanniel