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

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