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();
    });
})