Question

Found a lot of modal window plugins, tried different configuration options for some like SimpleModal, LightBox… these are lightweight and have flexible configuration, but i’m missing one thing: i need to be able scroll modal window (when it exceed in height) with browser scrollbar like facebook gallery modal, or pinterest.com pin preview modal, any suggestions?

Answer 1

$(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');
    }
});

I know this an old question, but I was struggling with the same issue and found this a suitable solution. It basically gives the illusion of scrolling the modal dialog, when actually it is pushing the top higher as you scroll down. I calculated the percentage of window scrolled and used that percentage to adjust the “top:” css property. In my case I had the top set to 32px, as you can see I adjusted for in my calculations. Hope this helps someone somewhere!

OH! and this which I stole from another thread is needed in certain browsers to unlock the scroll (i.e. in chrome the click event for the scrollbar is suppressed if modal: true)

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

I know this works in IE8+ as well as Chrome and FF.

EDIT: Added check to see if dialog was open.