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>
精彩评论