2014-10-15 1 views
0

У меня есть проблема, когда я запускаю новый модальный (SimpleModal) и использую (Tinyscrollbar) для прокрутки содержимого, поскольку полоса прокрутки, похоже, скрывает первый маркер (красное сообщение об ошибке) моего содержимого. См. Скрипт ниже, нажмите, чтобы открыть модальный, а затем возьмите полосу прокрутки, переместите ее вниз, затем переместите ее назад, чтобы увидеть скрытую пулю.Tinyscrollbar Скрытие содержимого внутри SimpleModal

Единственная причина, по которой я предполагаю, что это может быть связано с изменением высоты всякий раз, когда модальные всплывающие окна, поэтому я читал высоту модального контейнера и использовал его для определения «видового экрана», а затем я запустил tinyscrollbar_update() но безрезультатно.

Мои JS:

$(document).ready(function(e) { 
// Remove Order (from cart) Modal 
$('.btn_remove_order').click(function() { 
    $(".modalMultiAlert").modal({ 
     opacity: 60, 
     overlayCss: { height: "200px" }, 
     minHeight: 200, 
     maxHeight: 800, 
     onShow: function() { 
      var heightscroll = $('.simplemodal-container').height(); 
      $('.viewport').css('height', heightscroll);    
      var scrollbar = $('#scrollbar_container'); 
      scrollbar.tinyscrollbar(); 
      scrollbar.tinyscrollbar_update(); 
     }, 
     close: false 
    }); 
}); 

});

HTML, и CSS можно увидеть в Fiddle:

http://jsfiddle.net/cd80cpan/6/

Спасибо за вашу помощь!

ответ

0

Найденное решение! Я просто сделал копию (.clone) контейнера Tinyscrollbar, а затем сделал .replaceWith в том же контейнере, затем привяжите Tinyscrollbar оттуда, см. Код;

var $scrollbar = $('#scrollbar_container'); 
    // Let's make a copy of the Scrollbar Container 
    var $modalCopy = $scrollbar.clone(); 
    // Remove Order (from cart) Modal 
    $('.btn_remove_order').click(function() { 
     $(".modalMultiAlert").modal({ 
      opacity: 60, 
      minHeight: 200, 
      maxHeight: 800, 
      onShow: function() { 
       // Replace the Scrollbar container after the Modal has loaded with Copy 
       $scrollbar.replaceWith($modalCopy); 
       // Determine height of the Modal 
       var $heightscroll = $('.simplemodal-container').height(); 
       // Change the viewport height based on Modal height 
       $('.viewport').css('height', $heightscroll);  
       // Initialize Tinyscrollbar  
       $modalCopy.tinyscrollbar(); 
      }, 
      close: false 
     }); 
    });