javascript - HTML JavaScript 如何创建此表单？

Question

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

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

感谢您的阅读，

埃文

Answer 1

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

• prototype.js 的灯箱
• jQuery灯箱
• Fancybox或 jQuery
• jQuery的颜色框

还有其他人。

Answer 2

在jQuery中寻找fancybox

暗箱

灰盒

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

Answer 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>