维基百科对 模态窗口 有一个简洁的开头句子
在用户界面设计中，模态窗口是一个子窗口，用户必须与其交互才能返回到操作父应用程序，从而阻止应用程序主窗口上的工作流程。
这些在桌面应用程序中很常见，当程序需要做出重要决策时。由于 JavaScript“灯箱”（或其许多其他别名之一），它们在 Web 应用程序中变得越来越流行。不可否认，它们被过度使用。但是，在某些情况下，模态框是有意义的，并且可以有效地将用户的注意力集中到手头的重要任务上。在某些情况下，登录网站就是这些重要任务之一。
在我日常的网络浏览中，我遇到了几个。这些不是带有透明叠加层和动画弹出窗口花哨的“灯箱”，但它们符合模态框的定义。
Freshbooks
Wufoo
Grooveshark
Scrapblog
这里有一个免费的
嘿，趁我们在这里，让我们构建一个！以下是它的外观
与往常一样，我们将保持代码简洁和语义化。没有额外的垃圾。这样它就可以完美地使用和访问，并且重量轻。以下是它在没有 CSS 时的样子
我不会在这里列出所有代码来烦你。它没有太多内容！只是一个简单的表单区域，并在 CSS 中应用了一些图像。
喜欢它？讨厌它？
所以你有什么想法？这仅仅是一种趋势吗？它明智吗？我个人认为我喜欢它。它让设计师有机会做一些有创意的事情，赋予网站一些灵魂，而且我认为它并没有过多地影响用户体验。其他人可能不同意。删除网站既定的导航可能会让人感觉不对劲。我听说其他人说登录页面是放置当前新闻和其他有趣信息的好地方，因为这是人们肯定会看到的页面。
我个人认为这是一个好主意，只要有足够的空间点击“退出”模态页面。它们非常适合登录/注册之类的事情，您不需要网页上的任何额外“垃圾”，并让用户更容易专注于重要元素。
感谢您提供文件，看起来设计不错。
但是我尝试登录，它无法工作 - 您能将我的密码发送给我吗？
谢谢，
Chris
PS ;)
只要有一种非 JS 友好的方法来做到这一点，我就赞成它们。
因为我找不到一个我喜欢的，所以我写了自己的模态 框脚本。
它依赖于 jQuery（但是，嘿，还有人不再使用库吗？），但作为一个小信息框（甚至登录）效果非常好。查看我页面底部的演示。
我喜欢他们在 Hulu 上的做法（内联登录）。我有点把这些东西看作所有网站过去都使用的启动/入口页面的不同版本。
不过演示看起来非常清晰。
我真的很喜欢您对页面的样式设计。显然，您不太可能在页面上只有一个元素需要居中 - 但在背景上使用居中非常有效。
谢谢！
我一直是这些的粉丝，原因正是你所说的，Chris。我会尽量将它们应用到我的网站中，但绝不会以牺牲可用性为代价。
非常好的方法，不同的登录模型，谢谢
我更喜欢模态登录框。我真的很希望 Digg 有一个。我喜欢这样一个事实，如果我没有登录，并且我想与网站互动，我可以使用一个小模态窗口登录并停留在当前页面。
我希望 Digg 有一个的原因是，我经常在开始浏览时忘记登录，然后我想 Digg 一个故事，却不得不从该故事中重定向，然后在登录后，我被带回首页。如果他们有一个模态窗口，我就可以留在那里，而无需执行 3 个步骤来 Digg 一个故事；)
我使用带有表单的模态框的另一种好方法（我使用了 Thickbox）是用于从网站打印优惠券。我开发了该网站并添加了一个用于获取优惠券的小模态弹出链接 - 一个样式与网站匹配的表单会弹出，供用户输入其信息，并在他们提交后，在同一个模态框中弹出自定义优惠券。一些打印样式表魔法，然后他们就可以打印出他们自己的自定义优惠券。
我为一个客户制作了一个 WordPress 登录...
http://www.misswindward2008.com/wp-admin
我花了一段时间才弄清楚，但感谢 Firebug，我完成了。
非常棒！！
将在自己的网站上使用 :)
谢谢，
在 PC 上的 Firefox 3 中，演示登录按钮的光标指针不起作用。
我添加了这个，现在指针出现了
第 18 行
.button {
.......
........
cursor:pointer;
}
没错！我当时也在想 Digg 需要这样的登录方式。我讨厌必须点击离开我想 Digg 的内容，以便我可以登录。
很棒的东西！！
在 Mac 上的 Firefox 2 中，“免费的”绝对是一团糟。提交按钮从包含框的右侧伸出来，并且“记住我”没有显示“记住我”，而是显示“成员我”。
好东西，Chris！感谢您整理这些。
您知道，每次我使用某种模态窗口方法来处理 Web 应用程序时，最终都会得到相同的结果：大约 99% 的最终用户都很满意，并且一切正常。砰！
然后，剩下的 1% 在 Linux 上通过 iPhone 使用 Windows 模拟器运行 Mozilla 的用户会出现奇怪的窗口显示。
因此，尽管这需要大量的工作，并且不一定有助于推动朝着正确方向的变化，但有时为那些不想升级 Web 浏览器或受困于 Windows 95 的最终用户提供替代方法是值得的。你明白我的意思。
无论如何，感谢您提供的精彩整理。我还欣赏您那些漂亮且优秀的读者提供的有趣且有见地的评论。
在我看来，我认为这些很棒。只要它们实现得很好。
为什么在该代码中使用 <br> 或 <div class=”clear”>？
除非它在语义上有效 - 文本段落中的实际换行符，否则您永远永远不应该使用 <br>。
并且无需在每个标签/输入组合之间添加清除 <div>。只需将它们设置为 display:block、float:left，并在标签上清除:left 即可。