Question

我有一个相当大的项目，我们正试图从jQuery UI对话框迁移到Fancybox。

过去逻辑就是这样......

<a onclick="functionthatcreatesdialog()">Link</a>
...
function functionthatcreatesdialog() {
    $('#dialog').dialog({options}).dialog('open');
}

根据API文档，Fancybox的工作方式有所不同，这些都是我的尝试;我正试图拉一个AJAX页面：

<a id="startimport"
href="<?=Yii::app()->baseUrl;?>/index-dev.php/products/uploadCsvToServer">
Import from file</a>

后来......

$(document).ready(function() {
    $('#startimport').fancybox({someoptions});
    return false;
});

我还直接尝试onclick=""：

<a id="startimport"
href="<?=Yii::app()->baseUrl;?>/index-dev.php/products/uploadCsvToServer"
onclick="$('#startimport').fancybox();">
Import from file</a>

然而，没有任何作用！我也尝试过其他一些组合。什么都没有。

Chrome的控制台运行不正常，我认为该脚本可能无法正常加载，但确实如此。

$('#startimport').fancybox返回：

function (options) {
        var index,
            that     = $(this),
            selector = this.selector || '',
            run      = function(e) {
                var what = $(this).blur(), idx = index, relType, relVal;

                if (!(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) && !what.is('.fancybox-wrap')) {
                    relType = options.groupAttr || 'data-fancybox-group';
                    relVal  = what.attr(relType);

                    if (!relVal) {
                        relType = 'rel';
                        relVal  = what.get(0)[ relType ];
                    }

                    if (relVal && relVal !== '' && relVal !== 'nofollow') {
                        what = selector.length ? $(selector) : that;
                        what = what.filter('[' + relType + '="' + relVal + '"]');
                        idx  = what.index(this);
                    }

                    options.index = idx;

                    // Stop an event from bubbling if everything is fine
                    if (F.open(what, options) !== false) {
                        e.preventDefault();
                    }
                }
            };

        options = options || {};
        index   = options.index || 0;

        if (!selector || options.live === false) {
            that.unbind('click.fb-start').bind('click.fb-start', run);

        } else {
            D.undelegate(selector, 'click.fb-start').delegate(selector + ":not('.fancybox-item, .fancybox-nav')", 'click.fb-start', run);
        }

        this.filter('[data-fancybox-start=1]').trigger('click');

        return this;
    }

任何帮助将不胜感激。我试着寻找解决方案，但我尝试过没有帮助。我正在使用Yii框架btw。

Answer 1

首先，确保你加载了fancybox js和css文件（在jQuery之后）。

然后，对于这个html链接：

<a id="startimport" href="<?=Yii::app()->baseUrl;?>/index-dev.php/products/uploadCsvToServer">Import from file</a>

尝试：

$(document).ready(function () {
    $("#startimport").fancybox({
        type: 'ajax'
    });
});

...（您不需要return false;）。

如果您想在fancybox中打开多个链接，则可能需要切换到类而不是ID。

注意：ajax请求受same origin policy的约束。

如果您使用的是fancybox v2.x，请记住，如果fancyBox无法获取内容type，它会尝试根据href进行猜测，如果不是ajax，它会无声地失败成功（这与使用type作为默认{{1}}并且显示错误消息的先前版本不同。

Yancy / ajax链接的Fancybox问题

1 个答案: