Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where to find jQuery "scrollable" modal window plugin?

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?

like image 822
Faustas Misiunas Avatar asked Feb 06 '12 08:02

Faustas Misiunas


2 Answers

$(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.

like image 140
thelousystoic Avatar answered Sep 30 '22 15:09

thelousystoic


http://fstoke.me/jquery/window/

How can I open a Modal-Dialog window with scrollbars in javascript or jquery

like image 27
sandeep Avatar answered Sep 30 '22 13:09

sandeep