Нестандартная прокрутка во всплывающем окне

Делал намедни нестандартный красивый скроллинг (прокрутка) и столкнулся с одной проблемой, о решении которой я сегодня расскажу. За основу брал настраиваемый скроллбар с использованием плагина JScrollPane 2 (использует jquery), который подробно на русском описан тут.
Скрипт отлично работал на странице, однако совсем не хотел работать во всплывающем окне. После долгих раздумий я догадался, что скрипт надо подключать не только на самой странице,  но и внутри скрипта, который используется для всплывающего окна.
Теперь поподробнее и с кодом.

Итак, вот так я инициализирую нестандартную прокрутку:

<script type="text/javascript">
jQuery(function(){
//инициализация
  jQuery('.scroll-pane').jScrollPane({
     showArrows: true,
     verticalDragMinHeight: 89,
     verticalDragMaxHeight: 89
  })
//реинициализация
   var pane = jQuery('.scroll-pane');
   pane.jScrollPane({
     showArrows: true,
     verticalDragMinHeight: 89,
     verticalDragMaxHeight: 89
   });

   var api = pane.data('jsp');

   jQuery(window).resize(function() {
     api.reinitialise();
   });
});
</script>

Одинаковую минимальную и максимальную высоту для скролла задаю для того чтобы он всегда был одного размера. Также показал, как делать реинициализацию, потому что у самого поначалу были сложности с этим. Также обращаю ваше внимание, что при реинициализации надо обязательно задавать параметры для скролла (мин-макс высоту, показ стрелок и все что вы там пропишете), иначе после реинициализации скролл не оправдает ваших надежд на правильную работу. Это обозначает, что если не указать что надо показывать стрелки, то, как только вы подвинете окно и произойдет реинициализация, эти самые стрелки исчезнут.

Далее, допустим, вы для своего всплывающего окна используете скрипт:

$('a.poplight').click(function() {
//тут какой-то ваш код
});

Чтобы в вашем pop-up окне заработал этот плагин для скролла, надо просто его код инициализации и реинициализации вставить в код скрипта, как-то так:


$('a.poplight').click(function() {
//тут какой-то ваш код
jQuery(function(){

    jQuery('.popup .scroll-pane').jScrollPane({
      showArrows: true,
      verticalDragMinHeight: 89,
      verticalDragMaxHeight: 89,
      autoReinitialise: true
    })

    var pane = jQuery('.popup .scroll-pane');
    pane.jScrollPane({
      showArrows: true,
      verticalDragMinHeight: 89,
      verticalDragMaxHeight: 89,
      autoReinitialise: true
    });

    var api = pane.data('jsp');

    jQuery(window).resize(function() {
      api.reinitialise();
    });

});
//тут какой-то ваш код
});

Вот и все, проблема решена, теперь в вашем всплывающем окне плагин JScrollPane 2 будет отлично работать и выводить красивую прокрутку.