Question

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

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

感谢您阅读，

埃文

Answer 1

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

Lightbox for prototype.js
Lightbox for jQuery
Fancybox或jQuery
Colorbox for jQuery

还有其他人。

Answer 2

在jQuery中查找fancybox

Shadowbox

Greybox

你可以像这样和表格一样加载页面，是的，你可以创建一个比较表。看看它们是源代码，您将更容易复制。

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>

HTML JavaScript如何创建此表单？

3 个答案: