0

我有一个相当大的项目，我们正试图从 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 框架。

4

1 回答 1

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 请求遵循同源策略。

如果您使用的是 fancybox v2.x 请记住，如果fancyBox无法获取内容type，它将尝试根据并显示错误消息）。hrefajaxtype

于 2013-04-23T03:10:03.427 回答