Question

我正在使用优秀的jquery.simplemodal对话框插件来显示项目列表。这些项目包含超链接。这一切都很有效，只是模态对话框中的链接不会作为Tab键顺序的一部分出现。我已经尝试显式设置tabindex，但由于某种原因，只有输入元素按Tab键顺序排列 - 如果我在对话框中选中，我只需循环浏览3个输入元素并且不要点击锚点。

我是否在调用simplemodal插件时出错？

一个例子是http://dev.andrewbucknell.com/basic/demo1.html

演示的代码（带有相对路径）如下

<!DOCTYPE html>  
<html>  
<head>  
<title> SimpleModal Basic Modal Dialog </title>  
<meta name='author' content='Eric Martin' />  
<meta name='copyright' content='2010 - Eric Martin' /> 
<!-- Page styles -->  
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' /> 
<!-- Contact Form CSS files -->  
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' /> 
<!-- IE6 "fix" for the close png image -->  
<!--[if lt IE 7]>  
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />  
<![endif]--> 
<!-- JS files are loaded at the bottom of the page -->  
</head>  
<body>  
<div id='container'>  
        <div id='logo'>  
                <h1>Simple<span>Modal</span></h1>  
                <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>  
        </div>  
        <div id='content'>  
                <div id='basic-modal'>  
                        <h3>Basic Modal Dialog</h3>  
                        <p>A basic modal dialog with minimal styling and no additional options. There 
are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly 
on style options and/or external CSS for the look and feel.</p>
                        <input type='button' name='basic' value='Demo' class='basic'/> or <a 
href='#' class='basic'>Demo</a>
                </div>  
                <div id="funddialog">  
                        <div id="fundpickfilter">  
                                <div class="fundfilter">  
                                        <label style="font-weight: bold;" for="filtertext">Find: </label>  
                                        <input class="tfilter" type="text" id="filtertext" value=""/>  
                                </div>  
                                <div id="fundactions">  
                                                <button type="button" id="fundsearch" 
class="searchbutton">Search</button>
                                                <button type="button" id="fundreset" 
class="resetbutton">Reset</button>  
                                </div>  
                        </div>  
                        <div id="fundpicklist">  
                                <div class="fund"><a href="http://www.slashdot.org" >Item 
1</a></div>  
                                <div class="fund"><a href="http://www.arstechnica.com" >Item 
2</a></div>  
                                <div class="fund"><a href="http://www.techmeme.com" >Item 
3</a></div>  
                        </div>  
                </div>  
                <!-- modal content -->  
                <div id="basic-modal-content">  
                        <div id="funddialog">  
                                <div id="fundpickfilter">  
                                        <div class="fundfilter">  
                                                <label style="font-weight: bold;" for="filtertext">Find: </label>  
                                                <input class="tfilter" type="text" id="filtertext" value=""/>  
                                        </div>  
                                        <div id="fundactions">  
                                                        <button type="button" id="fundsearch" 
class="searchbutton">Search</button>
                                                        <button type="button" id="fundreset" 
class="resetbutton">Reset</button>
                                        </div>  
                                </div>  
                                <div id="fundpicklist">  
                                        <div class="fund"><a href="http://www.slashdot.org" >Item 
1</a></div>  
                                        <div class="fund"><a href="http://www.arstechnica.com" >Item 
2</a></div>  
                                        <div class="fund"><a href="http://www.techmeme.com" >Item 
3</a></div>  
                                </div>  
                        </div>  
                </div>  
        </div>  
</div>  
<!-- Load jQuery, SimpleModal and Basic JS files -->  
<script type='text/javascript' src='js/jquery.js'></script>  
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>  
<script type='text/javascript' src='js/basic.js'></script>  
</body>  
</html>

Answer 1

我自己也遇到了这个问题。这是我到目前为止所做的工作。 Simplemodal必须在函数'watchTab'和'focus'中添加选项卡导航，以便将焦点保持在模态内。它通过记录第一个和最后一个输入来实现这一点，当你选择它们时，关注适当的其他输入。不幸的是，它只关注输入而不是链接。这意味着您只能选择位于第一个和最后一个输入元素之间的链接。您可以覆盖或修改这些函数以获得所需的行为。像这样：

用var input = $('#simplemodal-data :input:visible:enabled, #simplemodal-data a:visible')[p]();

替换第473行

将第592行替换为s.inputs = $('#simplemodal-data :input:visible:enabled, #simplemodal-data a:visible');

这是一个简单的解决方案，如果浏览器没有链接选项卡，它可能会中断。我会尝试提出更好的东西。

Answer 2

我找到了SimpleModal 1.4.2的解决方案

第609行

改变这个 s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);

对此 s.inputs = $('a:visible, :input:enabled:visible', s.d.data[0]).filter(':first,:last');

Answer 3

s.d.data [0] s.d.data [0]还注意到既没有现有的实现，也有以下选择器：

s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);

也不是上面的答案，正确处理tabindexes - 最后一个元素之后的开关将完成dom中的第一个元素，而不是tabindex最少的元素（反之亦然）解决这个问题，你必须这样做：

s.inputs = $.merge(self.smallestTabindex(s.d.data[0]), self.biggestTabindex(s.d.data[0]));

其中函数smallest / largestTabindex返回适当的元素

简单模式对话框中链接的Tab键顺序

3 个答案: