1

アクセシビリティ要件に対応するために、モーダルウィンドウスクリプトを作成しようとしています。要件は、ウィンドウからタブで離れると、ウィンドウを閉じる必要があることを示しています。また、ウィンドウを閉じると、元のトリガー要素がフォーカスを取り戻す必要があることも示しています。

いくつか掘り下げた後、私はこれを見つけました：親が「フォーカス」を失ったかどうかを判断するjQuery。ウィンドウから離れた場所にタブで移動したことを確認する最も簡単な方法は、focusinイベントを追跡することであり、開いているモーダルの子ではない要素にフォーカスが発生した場合は、ウィンドウを閉じます。ただし、この方法には問題があります（私の好みには少し重すぎることは言うまでもありません）。これを処理するコードは次のとおりです。

$('body').focusin(function(e) {
        if (!$(e.target).parent().is('.current-window')) {
            closeModal();
        }
    });

およびウィンドウを閉じる関数：

function closeModal() {
        $('.modal-mask, .current-window').fadeOut('fast', function(){
            $(this).removeClass('current-window');
            $('.modal-mask').removeAttr('style');
            $('.modal-trigger').focus();
        });
    }

明らかに、このコードを実行すると、closeModal（）はfocusinイベント間で最大呼び出しスタックまで前後に起動するため、トリガー要素にフォーカスを与える前に「最大呼び出しスタックを超えました」というエラーメッセージをスローします。

完全なコードについては、このフィドルを参照してください：http: //jsfiddle.net/pbredenberg/wxX4T/

私はこの要件を処理するためのより良い方法を考えようとしています。少なくとも、無限ループを避けようとしています。誰かが私を正しい方向に向けることができますか？

4

2 に答える 2

0

私はまだコメントすることができないので、これを答えとして提出する必要があります：window.closeingのようなブール変数で実際にウィンドウを閉じているのかどうかを追跡しないのはなぜですか？例を更新しました：http：//jsfiddle.net/kevkong/wxX4T/8/ これは、あなたが意図したことですか？

于 2012-10-10T15:19:03.833 に答える
0

モーダルを開くときはいつでも、クリックされた要素への参照を保存します。次に、モーダルが閉じているときに、それを取得して要素に再度焦点を合わせることができます。

作業デモ： http： //jsfiddle.net/wxX4T/12/

function closeModal(e) {
    if (e) e.preventDefault();

    // Rather than using a .current-window class
    // we can use the jQuery :visible pseudo-selector
    var $window = $(".window:visible");

    // Get our refernce to the focus target that was 
    // stored when the window was open.
    var $trigger = $window.data("focusTarget");

    // Close the window and mask
    $('.modal-mask, .window').fadeOut('fast', function() {
        // Focus on the original trigger
        $trigger.focus();
    });
}

$('.modal').click(function(e) {
    e.preventDefault();

    var $trigger = $(this);
    var $modal = $($trigger.attr("href")).fadeIn(300)
    $('.modal-mask').fadeIn(200);

    // I have omitted all the code that positions
    // the window (for the sake of clarity)
    // Feel free to add it back.
    // Store a reference to the trigger link in the modal's "data" hash 
    // so that when we close it later, we can retrieve the original 
    // trigger that opened the window.
    $modal.data("focusTarget", $trigger);
});


// Trigger window close based on Tab key
$(document).on("keydown", function(e) {
    // Only close modal if the tab key is pressed
    // AND if there is a visible modal window.
    if ((e.keyCode || e.which) === 9 && $(".window:visible").length > 0) {
        e.preventDefault();
        closeModal();
    }
});

$(document).on("click", ".window .close", closeModal);

$(document).on("click", ".modal-mask", function() {
    $(this).hide();
    closeModal();
});​
于 2012-10-10T16:08:25.127 に答える