Question

我需要将fancybox2弹出框（div带有文字）放在另一个div（带有类 .popup-container）中，而不是放在屏幕。

我试过这个，但没有：

$(".js-add-form").fancybox({       
    maxWidth: 850,
    maxHeight: 570,
    fitToView: false,
    width: '850',
    height: '570',
    autoSize: false,
    closeClick: false,
    openEffect: 'none',
    closeEffect: 'none',
    parent: '.popup-container',
    helpers: {
        overlay: {
            locked: false
        }
    }
});

有人知道要解决吗？感谢

Answer 1

只需确保父容器.popup-container在您的CSS中有position: relative;，例如：

.popup-container {  
    position: relative;
    /* other css rules */
}

编辑：您可能还需要强制fancybox包装容器通过CSS中心，如

.fancybox-wrap {
    position: relative !important;
    left: auto !important;
    margin: 0 auto;
}

请注意，父容器（.popup-container）需要比fancybox 50px设置至少maxWidth更宽。还要确保添加

autoCenter: false

...到您的fancybox API选项，以便在向下滚动页面时，fancybox包装器不会相对于屏幕重新居中。

查看更新的 JSFIDDLE

Fancybox2显示以div为中心的弹出窗口

1 个答案: