0

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

Improve this question

3 Answers 3

Reset to default
3

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:

There are others too.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I will give both of these a try... FancyBox seems perfect for what I am looking for. I'm assuming that I'll need to add the FancyBox CSS file into my website directory and use from there?
This file: fancybox.net/howto Explains how to use it. You need to include jQuery and /fancybox/jquery.fancybox-1.3.4.pack.js plus some other optional js files for some extra animation. The page says which are optional and which aren't. For css you need /fancybox/jquery.fancybox-1.3.4.css. You have to host them on your own server. You can host jQuery yourself or use Google's server. I would recommend using Google's latest copy: ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js unless you are serving content to countries which may block Google
@Evan Note, that is version 1.6.2 while fancybox lists 1.4 as their example from Google's server. I believe fancybox is compatible with jQuery 1.6.2 tough as well in which case you should use it :)
2

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.

Improve this answer

Comments

1

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>
Improve this answer

5 Comments

I have successfully uploaded your code along with the files ... All that shows up is a normal form though. What should be happening?
this code is an example for lightbox. You can your comparison tables in test.html. the result will be shown like lightbox
I understand that - but don't I have to reference anything in "test.html" ?
use your checkbox code instead textbox in test.html. and download the nyromodal bundle from nyromodal.nyrodev.com/create.php?dl=1 include it into your index.html as above, give css,js filepath according your folder structure. The form with checkbox will open in lightbox. View demo site:nyromodal.nyrodev.com
no reference needed for test.html. its already given a hyperlink(class="nyroModal") in index.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.