Page 42 - JavaScript修炼之道

30 第三部分 UI技巧

任务 13 制作友好的弹窗

不管用“真”弹窗（单独的窗口）还是“伪”弹窗（实际是当前页面的元素，只是设置成类
似窗口的样式），都会碰到这个问题：如何让那些不能（或者不想）打开新窗口的用户访问这些
①
内容？想想窗口弹出被禁用的情况以及屏幕阅读器 、搜索引擎的访问等。
只有一种办法：先让链接真正链接到弹窗的内容，然后从那里开始逐步地改善效果。

如果你的内容是要作为HTML片段显示在伪弹窗中（可能还通过Ajax载入），那么不管带不
带document标记，你都需要确保在另一处提供其访问路径。那样一来，用户就能通过普通的链接，
以单独页面的形式访问到它，看到好的效果。

实际操作的要点是：用<a>标签链接到要弹出的内容（href=，或许还要加上target=
"_blank"），然后给这些链接挂上JavaScript代码，让它们活动起来。窗口弹出代码很简单——
就是用内置的window.open()方法。

如果需要伪弹窗或者光箱，一定要使用优秀的现有库以远离地狱般的跨浏览器问题和布局算
法。这里有一些可选项：

②
 Scripty2的UI部分
③
 jQuery UI
④
 Dijit（基于Dojo）
 YUI的覆盖模块
⑤
⑥
 Ext.Window
另外要记住，如果弹窗内容较少的话，使用单击触发的tooltip就足够了，而不必使用全功能
的弹窗。如果遇到这种情况，查查tooltip库和模块。

——————————
① 屏幕阅读器将屏幕上的文字、图形等转换成语音或盲文，帮助视觉障碍者操作电脑。如果未做仔细的处理，弹窗
的内容可能无法被屏幕阅读器访问。*
② 参见http://github.com/madrobby/scripty2。
③ 参见http://jqueryui.com/。
④ 参见http://dojotoolkit.org/projects/dijit。
⑤ 参见 http://developer.yahoo.com/yui/3/overlay/。
⑥ 参见http://www.extjs.com/deploy/dev/docs/?class=Ext.Window。