Fancybox：不同的宽度百分比 - 更清晰的脚本？

Question

我需要 100% 的 fancybox 宽度用于手机，90% 的宽度用于更大的屏幕。我确实调整了通用脚本并且它正在运行，但我知道它看起来像一个穴居人脚本：

           if (windowWidth > 480) {
              $(".fancybox").fancybox({
                  openEffect  : 'none',
                  closeEffect : 'none',
                  iframe : {
                      preload: false
                  },
                  padding: 0,
                  width : '90%',
                  height : '90%',
                  helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(0, 0, 0, 0.65)'
                        }
                    }
                  }
              });
          }else{
              $(".fancybox").fancybox({
                  openEffect  : 'none',
                  closeEffect : 'none',
                  iframe : {
                      preload: false
                  },
                  padding: 0,
                  width : '100%',
                  height : '90%',
                  helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(0, 0, 0, 0.65)'
                        }
                    }
                  }
              });
        }

所以，我想知道如何分离宽度和高度以避免 "duplicated" 定义。

Answer 1

只需将您的条件语句放入 fancybox afterLoad 回调中，例如：

afterLoad: function () {
    if (window.innerWidth > 480) {
        this.width = '90%'; // or whatever
        this.height = '90%';
    } else {
        this.width = '100%';
        this.height = '90%';
    }
}

请注意，为了获得自定义尺寸，您可能需要将 fitToView 选项设置为 false。您可能还需要调整 fancybox 边距。

见JSFIDDLE

Fancybox：不同的宽度百分比 - 更清晰的脚本？

Fancybox: different width percentages - cleaner script?

jquery

fancybox

fancybox-2