jQuery Facebox插件：集中顯示彈出窗口

Question

我有一個帶有Facebox彈出窗口的HTML頁面。

該頁面包含許多鏈接和表單，彈出窗口包含一個表單。 我想要的是，當我僅使用鍵盤按鈕打開彈出窗口時，可以直接使用“選項卡”按鈕轉到彈出窗口的表單輸入。

這是一個小提琴-> http://jsfiddle.net/tk1jagpb/

 $(document).ready(function () { $('a[rel*=facebox]').facebox() }) 

 .popup { background-color: mistyrose; } 

 <p><a href="#info" rel="facebox">Click to display</a></p> <div id="info" style="display: none;"> <p>Popup div</p> <p><input type="text" value = "" /></p> <p><input type="text" value = "" /></p> <p><input type="text" value = "" /></p> <p><input type="text" value = "" /></p> </div> <p><input type="text" value = "" /></p> <p><input type="text" value = "" /></p> <p><input type="text" value = "" /></p> 

如果是這樣，我可以使用鍵盤而不必單擊彈出框...這樣可以節省時間。

謝謝。

Answer 1

您可以監聽'reveal.facebox'事件 ，該事件在顯示facebox之后立即觸發。 一旦顯示了facebox，只需將焦點放在第一個輸入字段即可。

$(document).ready(function() {
    $('a[rel*=facebox]').facebox();
    $(document).bind('reveal.facebox', function() {
        $('.popup input:first').focus();
    });
})