发现了很多模态窗口插件,为SimpleModal,LightBox等一些尝试了不同的配置选项…这些是轻量级的并且配置灵活,但我缺少一件事：我需要能够滚动模态窗口(当它超过时浏览器滚动条,如facebook gallery modal,或pinterest.com pin预览模式,任何建议？
解决方法
$(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');
}
});
我知道这是一个老问题,但我正在努力解决同样的问题并发现这是一个合适的解决方案.它基本上给出了滚动模态对话框的错觉,实际上当你向下滚动时它会向上推顶部.我计算了滚动窗口的百分比,并使用该百分比来调整“top：”css属性.在我的情况下,我将顶部设置为32px,你可以看到我在计算中进行了调整.希望这可以帮助某个人！
哦！并且在某些浏览器中我需要从另一个线程中偷走这个以解锁滚动(例如,在chrome中,如果modal：true,则滚动条的click事件被抑制)
if ($.ui && $.ui.dialog) {
$.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','),function(event) { return event + '.dialog-overlay'; }).join(' ');
}
我知道这适用于IE8以及Chrome和FF.
编辑：添加检查以查看对话框是否已打开.
