如何将fancybox置于顶部

一种双管齐下的方法是使用'fixed'定位而非absolute，这将禁用滚动并阻止框架从页面上移动

内部CSS：

.fancybox-wrap { position:fixed !important; top: 100px !important; };

onComplete  : function(){
        $('.fancybox-wrap').css({'position':'fixed', 'top':'100px'});
    }

对于文档中提到的fancyBox 2.0及更高版本，如下所示http://fancyapps.com/fancybox/#docs

margin：视口和fancyBox之间的最小空间。可以设置为数组 - [top，right，bottom，left]。如果内容尺寸超过视口，则忽略右侧和底部边距
整数，数组；默认值：20

示例：

$('.fc-event').fancybox({
    autoCenter: true,
    margin: [100, 0, 0, 0], // [top, right, bottom, left]
    type: 'ajax',

我自己从未使用过fancybox，但看起来你需要将centerOnScroll设置为false，然后使用css将#fancybox-wrap定位到任何你认为合适的位置。

可能存在两个问题：

1. Fancybox 没有获取绝对位置或 z-index。解决方案：在位置为绝对的包装器中添加 !important。
2. 它们下面的 div 也具有绝对位置或正 z-index。解决方案：给下面的 divs 固定位置或相关位置，调整或添加负 z-index。

这对我来说很好用

<script>
    $.fancybox({
       'width'     : 620,
       'height'    : 490,
       'speedIn'    :600,
       'speedOut'   :200,
                'onStart' :function()
                {

                        $("#fancybox-wrap").addClass('my_class');
                },
    });
</script>
    <style>
    .my_class{top:20px !important; }
    </style>

我已经修改了fancybox库

版本：1.3.4（2010年11月11日）

使其能够正常工作：

在jquery.fancybox.js文件中找到以下行：

    $.fancybox.center = function() {

在这个范围内查找：

     wrap
        .stop()
        .animate({
            'top' : parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)),

并将其更改为：

    var topFromOptions = parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding));
    if (currentOpts.top) {
        topFromOptions = currentOpts.top;
    }
    wrap
        .stop()
        .animate({
            'top' : topFromOptions,

当在选择器传递选项时取消fancybox（例如）：

top: '100px' 

或者你想要什么其他的东西 :)

$('#fancybox-selector').fancybox({ 
    top: '20px',
    // transitionOut:'elsatic'
});

    //pass in the id of the link that was clicked and set the width and height for the iframe
    $.fn.fancybox_new = function (options) {
        for (i = 0; i < this.length; i++) {
            options._id = $(this[i]).attr("id");
            switch (options._id) {
                case "elementid": //set window size based on id
                    options.width = 375;
                    options.height = 190;
                    break;
            }
            $(this[i]).fancybox(options);
        }
    };

    $("a[rel*=formWin]").fancybox_new({
        onStart: function () {
            //create a style that will position the fancy box relative to the element that clicked it.
            if (this._id != "" && !$(this).hasClass(this._id)) {
                var style = document.createElement('style');
                var pos = $("#" + this._id).position();
                var mRight = parseInt($("#" + this._id).css("margin-right").replace("px")) + parseInt($("#" + this._id).css("padding-right").replace("px")) + parseInt($("#" + this._id).css("margin-left").replace("px")) + parseInt($("#" + this._id).css("padding-left").replace("px"));
                var mTop = parseInt($("#" + this._id).css("margin-top").replace("px", "")) + parseInt($("#" + this._id).css("padding-top").replace("px", "")) + parseInt($("#" + this._id).css("margin-bottom").replace("px", "")) + parseInt($("#" + this._id).css("padding-bottom").replace("px", ""));
                style.type = 'text/css';
                style.innerHTML = '.' + this._id + ' { top: ' + (pos.top + $("#" + this._id).height() + mTop) + 'px !important; right: ' + ($("body").width() - pos.left - $("#" + this._id).width() - mRight).toString() + 'px !important; left:auto !important; }';
                document.getElementsByTagName('head')[0].appendChild(style);
                $('#fancybox-wrap').addClass(this._id);
            }
        }
    });

#YOUR_FANCYBOX_WINDOW_SELECTOR {
    vertical-align: top;
}

FancyBox v3.5.2