【发布时间】：2011-11-17 10:10:00
【问题描述】：
我正在使用出色的 jquery.simplemodal 对话框插件来显示项目列表。这些项目包含超链接。除了模式对话框中的链接没有作为选项卡顺序的一部分出现之外，这一切都很好。我已经尝试显式设置 tabindex，但由于某种原因，只有输入元素按 tab 顺序排列 - 如果我通过对话框进行 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>
【问题讨论】：
标签： jquery dialog simplemodal