3

以前のバージョンの fancybox では、fancybox にフォーカスを設定するために onComplete 関数を使用していました (キーボードを使用しているユーザーがサイトにアクセスしやすくするため)。

fancybox 2 は同じ構文に従っていないようです。レンダリングされたファンシーボックスにフォーカスを設定するためのコードを手伝ってくれる人はいますか?

以前は:

$(".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 に答える