gpt4 book ai didi

javascript - 在哪里可以找到 jQuery "scrollable"模态窗口插件?

转载 作者:数据小太阳 更新时间:2023-10-29 04:44:47 25 4
gpt4 key购买 nike

找到了很多模态窗口插件,尝试了一些不同的配置选项,比如 SimpleModal、LightBox...这些都是轻量级的并且具有灵活的配置,但我遗漏了一件事:我需要能够滚动模态窗口(当它超过高度)与浏览器滚动条类似 facebook gallery modal,或 pinterest.com pin preview modal,有什么建议吗?

最佳答案

$(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 属性。在我的例子中,我将 top 设置为 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。

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

关于javascript - 在哪里可以找到 jQuery "scrollable"模态窗口插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9157585/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com