javascript - Fancybox - 为不同的覆盖设置宽度

Question

我有几个内容 block 在 Fancybox 中打开。这一切都按预期工作，但几个盒子的内容非常小，并不能真正保证 1000 像素宽度的 Fancybox 覆盖。有没有办法将这些框的宽度设置为其他值？

例如，我曾尝试为内容框添加宽度 (#login-overlay)，但 Fancybox 只是忽略了这一点，因为一旦相关链接被点击打开覆盖，它就会围绕内容构建。

这是我的 javascript:

$(document).ready(function() {
    $(".fancybox").fancybox({
        margin: [20,20,20,20],
        padding: [20,20,0,20],
        openEffect: 'fade',
        openEasing: 'easeInQuad',
        openSpeed: 400,
        title: false,
        //closeBtn: false,
        //autoCenter: false,
        scrolling : 'no',   // turns off scrolling in box.
        fitToView : false,  // allows box to overflow out of viewport.
        autoSize: false,    // needs to be turned off for width/maxWidth to work.
        height: 'auto',     // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
        width: '100%',
        maxWidth: 960,
        helpers: {
            overlay: {
                // locked: false, // Prevents jump to top of window when opening a fancybox.
                showEarly : false
            }
        },
        tpl: {
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
        }
    });
});

如您所见，我正在使用 maxWidth 查看默认尺寸的宽度。我几个盒子几乎是一半。我试过设置 auto，看看它是否会继承 CSS 中内容 block 上设置的宽度，但这似乎不起作用。

有什么想法不涉及为 $(".fancybox-narrow") 编写整个需要的脚本 block 吗？

编辑 我实际上在 Fancybox 页面上找到了一个示例，它使用 data-fancybox-width 来设置叠加层的宽度:http://jsfiddle.net/wgPTR/

尽管这似乎不适用于我的代码。宽度设置但不再响应。将 fitToView 设置为 false 似乎可以正常工作，但是当没有足够的垂直空间并且无法滚动时，fancybox 就会裁剪。

更新

只是为了更新，这是工作(默认)fancybox 的 CodePen:http://codepen.io/moy/pen/YGgjqv

我还创建了一个 fork 版本，它使用 data-fancybox-width 来设置宽度 - 这有效但不幸的是 fancybox 不再响应。让它工作的唯一方法是去掉 fitToView: false 这会破坏我的垂直滚动。

有什么想法吗？

Answer 1

我似乎已经通过使用以下 beforeLoad if 语句找到了解决方案(在 CSS Tricks 论坛的大量帮助下):

beforeLoad: function() {
    if ($(this.element).hasClass('fancybox--small')) {
        this.maxWidth = 600;
    }
}

基本上它会检查 fancybox--small 类，如果它存在，它会修改 fancybox 的 maxWidth。

(目前)看不出有任何问题，在 IE 中检查它似乎也适用于 IE8。希望这对其他人有帮助，但如果您发现任何问题，请告诉我；)