滚动页面时,如何在屏幕上修复fancybox弹出窗口的位置?
这个插件中有没有选项,或者我必须使用css
来定义它?
在API页面中 ,centerOnScroll似乎是您想要的:
密钥:centerOnScroll
默认值:false描述:如果为true,则在滚动页面时FancyBox居中
简单地使用centerOnScroll API选项的问题是,当您向上和向下滚动页面时,您会注意到您的fancybox窗口必须“赶上”,因为它不断尝试设置动画以使其返回到中心位置。 这导致了一个看起来不那么好的“生涩”运动。
如果您不介意编辑Fancybox源代码,可以使用的解决方案是找到fancybox_get_viewport函数并进行更改。 我正在使用Fancybox 1.3.4。 所以找到这个:
_get_viewport = function() { return [ $(window).width() - (currentOpts.margin * 2), $(window).height() - (currentOpts.margin * 2), $(document).scrollLeft() + currentOpts.margin, $(document).scrollTop() + currentOpts.margin ]; },
并将其替换为:
_get_viewport = function() { var isFixed = wrap.css('position') === 'fixed'; return [ $(window).width() - (currentOpts.margin * 2), $(window).height() - (currentOpts.margin * 2), (isFixed ? 0 : $(document).scrollLeft()) + currentOpts.margin, (isFixed ? 0 : $(document).scrollTop()) + currentOpts.margin ]; },
这解决了这个问题,现在当您向上和向下滚动页面时,它将完全保留在浏览器的同一位置。 唯一的问题是这种变化会导致一些动画问题,有时新的弹出窗口会出现在屏幕的底部。 要解决此问题,需要进行一些更改。 第378行改变了这个:
start_pos = { top : pos.top, left : pos.left, width : wrap.width(), height : wrap.height() };
至:
final_pos = { top : ((wrap.css('position') === 'fixed') ? pos.top - $(this).scrollTop() : pos.top), left : pos.left, width : wrap.width(), height : wrap.height() };
在第978行,你会看到同样的事情。 也替换它。 这应该可以解决修复过程中出现的动画问题。
最后在你的Fancybox的CSS中找到:
#fancybox-wrap { position: absolute; top: 0; left: 0; padding: 20px; z-index: 1101; outline: none; display: none; }
并替换为:
#fancybox-wrap { position:fixed; top: 0; left: 0; padding: 20px; z-index: 1101; outline: none; display: none; }
我希望这可以帮助那些希望他们的弹出窗口完全固定在屏幕上的人,希望我有这个解决方案,但我必须自己弄明白:)
对于本文档https://fancyapps.com/fancybox/#docs中提到的fancyBox 2.0
及更高版本
autoCenter :如果设置为true,则内容将始终以布尔值为中心; 默认值:!isTouch
例:
需要了解更多jQuery教程分享jQuery FancyBox:滚动时弹出窗口相对于窗口的固定位置,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
$('.fc-event').fancybox({ autoCenter: true, type: 'ajax',
以上就是jQuery教程分享jQuery FancyBox:滚动时弹出窗口相对于窗口的固定位置相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/982274.html