3

我曾经在以前版本的 fancybox 中使用 onComplete 函数来将焦点设置到 fancybox（使使用键盘的人更容易访问网站）。

看起来fancybox 2 并没有遵循相同的语法。有没有人能够帮助一些代码在渲染后将焦点设置到fancybox？

以前是：

$(".fancybox-call").fancybox({
               padding:   20, 
        fitToView   : false,
        width       : 960,
        height      : 615,
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
                type                : 'inline',
                onComplete : function () {
                                          $(".fancybox-wrap").focus();
                                }
});

现在尝试：

$('a#feedback-button').each(function(){
    $(this).fancybox({
            padding     : 0,
            fitToView   : false,
            width       : 700,
            height      : 820,
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            type        : 'iframe',
            scrolling   : 'no',
            beforeShow   : function() {
                             $(".fancybox-inner").focus();
                        }
    });

没有运气。

如果不将焦点设置到fancybox，键盘用户必须在整个调用页面中切换，然后才能访问fancybox 中的表单。

4

2 回答 2

4

从 Fancybox 2.1.4 开始，关闭按钮是一个锚点，不再是一个 div 标签，所以我只是将这段代码设置为关注关闭按钮：

afterShow: function(){
    $('.fancybox-close').focus();
}

我还更改了键配置以删除由 enter 键触发的下一个链接，因此 enter 键将关闭 Fancybox ：

keys  : {
    next : {
        34 : 'up',   // page down
        39 : 'left', // right arrow
        40 : 'up'    // down arrow
    },
    prev : {
        33 : 'down',   // page up
        37 : 'right',  // left arrow
        38 : 'down'    // up arrow
    },
    close  : [27], // escape key
    play   : [32], // space - start/stop slideshow
    toggle : [70]  // letter "f" - toggle fullscreen
},
于 2013-04-04T09:20:31.260 回答
0

应将以下内容添加到 fancybox 调用中。它适用于所有内容（内联、ajax 或 html）

afterShow: function () {
    $(this.content).attr("tabindex",1).focus()
}

所以 fancybox 调用应该是这样的。

$(".your_element_class").fancybox({
    afterShow: function () {
        $(this.content).attr("tabindex",1).focus()
    }
});

请将“your_element_class”更改为您调用fancybox 的html 元素的类。

于 2017-03-02T23:07:54.193 回答