Где найти jQuery "прокручиваемый" модальный оконный плагин? - PullRequest
7 голосов
/ 06 февраля 2012

Нашел много модальных оконных плагинов, попробовал различные варианты конфигурации для некоторых, таких как SimpleModal, LightBox ... они легкие и имеют гибкую конфигурацию, но мне не хватает одной вещи: мне нужно иметь возможность прокручивать модальное окно (когдаон превосходит по высоте) с помощью полосы прокрутки браузера, например, модальной галереи Facebook, или модального предварительного просмотра булавки pinterest.com, какие-либо предложения?

Ответы [ 2 ]

4 голосов
/ 20 декабря 2012
$(window).scroll(function(){
    if($('#ux-dialog-test-container').dialog('isOpen') === true){
        var dialogHeight = $('.ui-dialog').height();
        var windowHeight = $(window).height();
        var documentHeight = $(document).height();
        var scrollLength = documentHeight - windowHeight;
        var currentScrollTop = $(window).scrollTop();
        var scrollPercentage = currentScrollTop/scrollLength;
        var pixelsToSubtract = dialogHeight * scrollPercentage;
        var newTop = 32 - pixelsToSubtract;
        $('.ui-dialog').animate({top: newTop + 'px'}, 15, 'swing');
    }
});

Я знаю, что это старый вопрос, но я боролся с той же проблемой и нашел это подходящее решение. По сути, это создает иллюзию прокрутки модального диалога, когда на самом деле он перемещает верхнюю часть вверх по мере прокрутки вниз. Я рассчитал процент прокручиваемого окна и использовал этот процент для настройки свойства css: top:. В моем случае верхний уровень был установлен на 32 пикселя, как вы можете видеть в моих вычислениях. Надеюсь, это кому-то поможет!

OH! и то, что я украл из другого потока, необходимо в некоторых браузерах для разблокировки прокрутки (то есть в chrome событие click для полосы прокрутки подавляется, если modal: true)

if ($.ui && $.ui.dialog) {
    $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}

Я знаю, что это работает в IE8 +, а также в Chrome и FF.

РЕДАКТИРОВАТЬ: Добавлена ​​проверка, чтобы увидеть, если диалог был открыт.

...