Question

发现了很多模态窗口插件，为SimpleModal，LightBox等一些尝试了不同的配置选项...这些是轻量级的并且配置灵活，但是我缺少一件事：我需要能够滚动模态窗口（当浏览器滚动条如facebook gallery modal，或pinterest.com pin预览模式，有什么建议吗？

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

我知道这是一个老问题，但我正在努力解决同样的问题并发现这是一个合适的解决方案。它基本上给出了滚动模态对话框的错觉，实际上当你向下滚动时它会向上推顶部。我计算了滚动窗口的百分比，并使用该百分比来调整“top：”css属性。在我的情况下，我将顶部设置为32px，你可以看到我在我的计算中进行了调整。希望这可以帮助某个人！

OH！并且在某些浏览器中我需要从另一个线程中偷走这个以解锁滚动（例如，在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。

编辑：添加了检查以查看对话框是否已打开。

Answer 2

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

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

哪里可以找到jQuery“可滚动”模态窗口插件？

2 个答案: