在现代网页设计中的模态窗口.pdf

精品文档 网页设计 本质上讲就是把信息组织成一种可读， 实用， 功能性的并且可以方便的格式。 良好的内 容组织是至关重要的，当你在建立一个网站的时候你需要一个强大的布局。 您可以使用众多的 界面元素和结构去组织内容， 如 jQuery 内容滑动器 （slider ）和模态窗口 （modal windows 。 从 根本上说， 就是窗口浮动在网页上。 模态窗口有许多优点。 例如，当一个模态窗口包含一个较小的元素时，用户并不需要加载一个 完成的全新新页面就可以访问它。 （达到同样效果的另一种方式来是使用基于 AJAX 的标签） 。通 过模态窗口， 您提高网站的可用性。 一次又一次的加载网页是会令大多数用户感到烦扰， 因此避 免这种状况绝对是一件好事。 模态窗口也可以为您以节省空间通过避免使用不需要出现在主页 面的大元素。 例如，您只需提供一个链接，缩略图或某种按钮， 而不是把完整的视频的放在网 页上。 在这篇文章里面， 我们将了解 建立多态窗口的最佳做法和趋势 。 我们也会提供许多良好的模态 窗口的例子和一些脚本来帮助您开始建设他们。 你可以对下面的文章也感兴趣： o 30 Scripts For Galleries, Slideshows and Lightboxes o How To Use Help Elements To Improve Your Designs o 8 Layout Solutions To Improve Your Designs o Designing Drop-Down-Menus: Examples and Best Practices o Breadcrumbs in Web Design When to Use Modal Windows 何时使用模态的 Windows 模态窗口是一个很好的结构元素， 但是他们并不一定适合所有的内容或媒体类型。 这里有几个元 素素，您 应该 考虑使用模态窗口。 Lightbox for Images/Videos 为了图片 / 视频的 lightbox 最明显的使用模态窗口的是 lightbox ，用一种干净和实用的方式来展示图片和视频。 使用 lightbox 展示图片，用户不需要只是为了一个单一的图片或视频而加载新的页面。 模态窗口也 在内容布局中节省了空间， 使您只显示图片或视频的缩略图， 点击缩略图， 它的模态窗口打开。 使 用缩略图代替整个元素，你需要少得多的空间而且布局看起来更有组织。 此外，你通常会模糊或渐暗模态窗口后面的的背景， 把焦点放在图片或视频本身，从而创造一 个良好的环境使访问者可以查看媒体。 对褪色，模糊模态窗口的背景的细节，看下面给出的样 式实例。 当使用了 lightbox 来实现一个图像画廊， 一定要确定链接每个图像到相同的 lightbox ，提供 “下 一个 ”和 “上一个 ”的按钮，使用户可以方便的浏览的一组图片。用户可以不关闭并重新打开模态 窗口，以查看画廊中的每一幅画。 Contact Forms 联系表单 在模态窗口中的表单是一种常见的联系表单。 模态窗口为了这个目的做的很好，是因为您不用 为了这个功能建立一个完整的网页。 依据可用性来说，立即可用和容易找到对于联系表单是非 常重要的。 使用浮动窗口，联系表单在每个页面是容易访问。 联系表单一般很小，所以他们会 相当不错组装在这些窗口中。