22-讨论

13.5.3　讨论

模态窗口解决方案从定义一个布尔变量开始，该变量表示浏览器是否为Internet Explorer 6。为了确定变量值，进行了两次快速求值。一旦知道了我们所面对的是IE6，就可以修补功能。你还将注意到，在动态创建的标记中包含一个条件注释：

<!--[if IE 6]><iframe id="modal_iframe"></iframe><![endif]-->

乍一看，这条注释令人困惑，因为如果浏览器是Internet Explorer 6，插入的空iframe不引用任何页面内容。这样做的原因是为了欺骗IE6，使其允许模态窗口覆盖页面中可能存在的任何 <select> 表单元素。如果不采用这一变通方法，页面上的所有 <select> 表单元素将“刺穿”模态覆盖层，导致用户迷失方向。

接下来，创建一个函数，它包含在视窗中居中显示模态窗口所需的所有计算。虽然可以在CSS中完成这些计算和简单地硬编码宽度和高度，但是这个函数的灵活性更好。

实现这个JavaScript的开发人员只需要在CSS中设置模态窗口的宽度，函数负责其他的功能，甚至考虑到不同高度的内容。下一个函数只用于Internet Explorer 6，修补了IE6对CSS position: fixed 属性支持的缺失。对于其他的所有浏览器，模态窗口都能够在用户滚动查看长文档时保持水平和垂直居中。但是在IE6中，需要明确地告诉模态窗口在用户滚动时调整其位置。我们将在文件的后面调用这个函数完成调整。

显示模态窗口实际上很简单。将所有必要的代码集中在 showModal() 中，它包括当浏览器为IE6时调用 positionModal() 。 showModal() 显示模态包装器 <div> 并调用 sizeModal() ，根据内容的高度居中模态窗口并调整大小。一旦正确设置大小，模态窗口本身就会显示出来。对任何动态插入的图像附加了一个 onload 函数，这是考虑到浏览器在图像完全缓存之前不知道它的尺寸。注意， showModal() 在文件的后面才会真正调用。

当文档加载时，将模态窗口的标记附加在 </body> 结束标记之后。

把单击监听器附加到所有具有 class="modal" 属性的链接上。当单击模态链接时，为了确定加载的内容类型，进行一系列求值。首先，如果链接以#符号开始，后面是一个或者多个字符，我们就知道这是链接的页内内容。第二种情况涉及图像。如果 href 以 .jpg 、 .png 或 .gif 结束，则创建一个 <img> 标记，将 href 属性复制到 src 中。第三种情况是，如果前面的条件都不符合，我们很可能正在处理一个外部页面。在这种情况下，调用jQuery的 .load() 方法，从页面（如果存在#符号，则从具体的ID）读取HTML并插入模态窗口。

下一块代码为模态覆盖层（灰色背景）添加单击事件监听器和关闭按钮。如果单击其中一个，模态窗口将会隐藏，所有模态窗口图像从它们的事件监听器中删除，将把模态窗口内容设置为空串，模态窗口的标题栏中的文本也将重置。

最后是专用于IE6的一个窗口滚动事件监听器。如果模态窗口包装器可见（包括其他与模态窗口相关联的其他元素），则在用户滚动页面时连续调用 positionModal() 。这能确保模态窗口模拟 position:fixed ，停留在正确的位置。