Question

我有几个内容块在Fancybox中打开。这一切都是有意义的，但是几个盒子的内容非常小，并不能保证1000px宽度的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中内容块上设置的宽度，但这似乎不起作用。

任何不涉及编写整体的想法都需要$(".fancybox-narrow")的脚本块？

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

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

更新

只是为了更新，这是一个工作（默认）fancybox的CodePen：http://codepen.io/moy/pen/YGgjqv

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

有什么想法吗？

Answer 1

我似乎通过使用以下SetLogger() if语句找到了一个解决方案（CSS Tricks论坛提供了很多帮助）：

beforeLoad

基本上它会检查班级beforeLoad: function() { if ($(this.element).hasClass('fancybox--small')) { this.maxWidth = 600; } }，如果它出现，它会修改fancybox的fancybox--small。

无法看到任何问题（还），在IE中查看它似乎也可以解决IE8问题。希望这有助于其他人，但如果您发现任何问题，请告诉我;）

Fancybox - 设置不同叠加层的宽度

1 个答案: