jquery - 在窗口调整大小时更新 fancyBox 边距

Question

回复： http: //fancyapps.com/fancybox/#docs

我已经为自定义边距设置了选项，但如果窗口低于特定大小，我想调整它。有谁知道这是否可以使用 API 方法完成。尽管以下内容不起作用，但它可以让您了解我正在尝试做的事情：

if ($(window).width() <= 1024) $.fancybox.update({margin:18});

任何帮助表示赞赏。

谢谢

Answer 1

I resolved this problem by using the onUpdate() callback that fancybox provides and changing the margins there based on the screen width:

$(document).ready(function() {
    $(".fancybox").fancybox({ 
        onUpdate: function () {
            if ($(window).width() < 768) {
                $.fancybox.current.margin = [10,10,10,10];
            } else {
                $.fancybox.current.margin = [30,90,30,90];
            }
        }
    });
});

Answer 2

我已经使用媒体查询进行了更改。

默认情况下，fancybox 保留在您的代码中：

padding: 0
margin: 0

然后在您的容器 div 弹出窗口中放置您的边距或填充，然后您就可以使用媒体查询了。

@media only screen and (min-width: 1024px) {
    ....
}