开发者

HTML JavaScript How can I create this Form?

I came across a really nice looking form while using RapidShare and I was curious as to how they made it. If you look HERE and click on "开发者_JS百科Eliminate annoying waiting with RapidPro!" a menu / form will appear. I am using Intuit to design my webpage and I was curious whether or not this was actually a form that is appearing in front of me.

As a possible side question - Is there an easy way to make a nice looking table with checkboxes in it similar to the one displayed by RapidShare? I really like this method for comparing and contrasting two different plans.

Thank you for reading,

Evan


Yes, the contents of that "popup" is a plain HTML table with some css to make it fancier. All they are doing is using Javascript to animate a div to popup into the center of the screen, and using css to style it nicely. They seem to have a custom solution that doesn't use jQuery, but there are many framework plugins that do the same:

  • Lightbox for prototype.js
  • Lightbox for jQuery
  • Fancybox or jQuery
  • Colorbox for jQuery

There are others too.


Look for fancybox in jQuery

Shadowbox

Greybox

You can load a page in a popup style like this and for the table, yeah you can create a comparasion table. Look are they source code and it will be easier for you to replicate.


See nyroModal in Jquery, you can see lightbox examples for HTML forms and image gallery. Download the bundle from: http://nyromodal.nyrodev.com/create.php?dl=1 and create a file and include these codes

**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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜