HTML JavaScript 如何创建此表单？答案

【问题标题】：HTML JavaScript How can I create this Form?HTML JavaScript 如何创建此表单？
【发布时间】：2011-07-27 13:07:30
【问题描述】：

我在使用 RapidShare 时遇到了一个非常漂亮的表单，我很好奇他们是如何做到的。如果您查看 HERE 并单击“使用 RapidPro 消除烦人的等待！”将出现一个菜单/表格。我正在使用 Intuit 来设计我的网页，我很好奇这是否真的是出现在我面前的一种形式。

作为一个可能的附带问题 - 有没有一种简单的方法可以制作一个漂亮的表格，其中包含复选框，类似于 RapidShare 显示的表格？我真的很喜欢这种比较和对比两个不同计划的方法。

感谢您的阅读，

埃文

【问题讨论】：

标签： javascript html forms intuit

【解决方案1】：

是的，那个“弹出”的内容是一个普通的 HTML 表格，带有一些 css 使它更漂亮。他们所做的只是使用 Javascript 为 div 设置动画以弹出到屏幕中心，并使用 css 对其进行漂亮的样式设置。他们似乎有一个不使用 jQuery 的自定义解决方案，但是有很多框架插件可以做到这一点：

Lightbox原型.js
Lightbox 用于 jQuery
Fancybox 或 jQuery
Colorbox 用于 jQuery

还有其他的。

【讨论】：

我会尝试这两个... FancyBox 似乎非常适合我正在寻找的东西。我假设我需要将 FancyBox CSS 文件添加到我的网站目录并从那里使用？
这个文件：fancybox.net/howto 解释如何使用它。您需要包含 jQuery 和 /fancybox/jquery.fancybox-1.3.4.pack.js 以及一些其他可选的 js 文件以获得一些额外的动画。该页面说明哪些是可选的，哪些不是。对于 CSS，您需要 /fancybox/jquery.fancybox-1.3.4.css。您必须将它们托管在您自己的服务器上。您可以自己托管 jQuery 或使用 Google 的服务器。我建议使用 Google 的最新版本：ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js，除非您向可能阻止 Google 的国家/地区提供内容
@Evan 注意，这是 1.6.2 版本，而 fancybox 将 1.4 列为 Google 服务器的示例。我相信fancybox 也与jQuery 1.6.2 兼容，在这种情况下你应该使用它:)

【解决方案2】：

在 jQuery 中查找 fancybox

Shadowbox

Greybox

您可以像这样以弹出式样式加载页面，对于表格，是的，您可以创建一个比较表。看看它们是不是源代码，复制起来会更容易。

【讨论】：

【解决方案3】：

查看 Jquery 中的 nyroModal，您可以查看 HTML 表单和图片库的灯箱示例。从http://nyromodal.nyrodev.com/create.php?dl=1 下载捆绑包并创建一个文件并包含这些代码

**index.html**
<script SRC="jquery.tools.min.js"></script>
<link rel="stylesheet" href="nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.nyroModal.custom.js"></script>
<script type="text/javascript" src="jquery.nyroModal-ie6.js"></script>

<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
<a class="nyroModal" href="test.html"> Light Box view</a>
----------------------------------------------------------------------------------------
**test.html**
<form>
<label>  name </label><input type="text" name="testname" />
</form>

【讨论】：

我已经成功上传了您的代码和文件......不过，所有显示的都是正常形式。应该发生什么？
此代码是灯箱的示例。您可以在 test.html 中比较表。结果会像灯箱一样显示
我明白 - 但我不必在“test.html”中引用任何内容吗？
使用您的复选框代码而不是 test.html 中的文本框。并从nyromodal.nyrodev.com/create.php?dl=1 下载 nyromodal 包，如上将其包含到您的 index.html 中，根据您的文件夹结构提供 css,js 文件路径。带有复选框的表单将在灯箱中打开。查看演示站点：nyromodal.nyrodev.com
test.html 不需要参考。它已经在 index.html 中给出了一个超链接（class="nyroModal"）