我找到了很多模态窗口插件,尝试过一些不同的配置选项,比如SimpleModal、LightBox等,它们都非常轻巧且具有灵活的配置,但是我缺少一个功能:当模态窗口超出高度时,我需要能够通过浏览器滚动条滚动模态窗口,就像Facebook画廊模态窗口或Pinterest.com钉子预览模态窗口那样。有什么建议吗?
我找到了很多模态窗口插件,尝试过一些不同的配置选项,比如SimpleModal、LightBox等,它们都非常轻巧且具有灵活的配置,但是我缺少一个功能:当模态窗口超出高度时,我需要能够通过浏览器滚动条滚动模态窗口,就像Facebook画廊模态窗口或Pinterest.com钉子预览模态窗口那样。有什么建议吗?
$(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');
}
});
if ($.ui && $.ui.dialog) {
$.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}