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?
$(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.
http://fstoke.me/jquery/window/
How can I open a Modal-Dialog window with scrollbars in javascript or jquery
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With