如何找到jQuery“可滚动”的模态窗口插件？

Question

我找到了很多模态窗口插件，尝试过一些不同的配置选项，比如SimpleModal、LightBox等，它们都非常轻巧且具有灵活的配置，但是我缺少一个功能：当模态窗口超出高度时，我需要能够通过浏览器滚动条滚动模态窗口，就像Facebook画廊模态窗口或Pinterest.com钉子预览模态窗口那样。有什么建议吗？

- Faustas Misiunas

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，如您所见，我在我的计算中进行了调整。希望这能帮助某个地方的某个人！

哦！在某些浏览器中需要从另一个线程中窃取的内容才能解锁滚动（即在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中都起作用。

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

- thelousystoic

Answer 2

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

如何在JavaScript或jQuery中打开带有滚动条的模态对话框窗口

- sandeep

---

不，这并不完全是我要找的... 我需要能够使用浏览器垂直滚动条滚动模态窗口本身，而不是在该模态窗口内拥有可滚动内容。 - Faustas Misiunas