在哪里可以找到 jQuery“可滚动”模式窗口插件？答案

【问题标题】：Where to find jQuery "scrollable" modal window plugin?在哪里可以找到 jQuery“可滚动”模式窗口插件？
【发布时间】：2012-02-06 08:50:17
【问题描述】：

找到了很多模态窗口插件，尝试了一些不同的配置选项，比如 SimpleModal、LightBox……这些都是轻量级的并且具有灵活的配置，但我缺少一件事：我需要能够滚动模态窗口（当它超过了高度）使用浏览器滚动条（如 facebook 画廊模式或 pinterest.com pin 预览模式），有什么建议吗？

【问题讨论】：

标签： javascript jquery jquery-plugins modal-dialog

【解决方案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，正如你所看到的，我在计算中进行了调整。希望这可以帮助某个地方的人！

哦！在某些浏览器中需要我从另一个线程中窃取的内容来解锁滚动（即，在 chrome 中，如果 modal: true 会抑制滚动条的单击事件）

if ($.ui && $.ui.dialog) {
    $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}

我知道这适用于 IE8+ 以及 Chrome 和 FF。

编辑：添加检查对话框是否打开。

【讨论】：

【解决方案2】：

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

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

【讨论】：

不，这不是我想要的。我需要能够使用浏览器垂直滚动条滚动模态窗口本身，而不是在这个模态窗口中有可滚动的内容。