HTML JavaScriptこのフォームを作成するにはどうすればよいですか？

Question

RapidShareを使用している間、私は本当に見栄えの良いフォームを見つけました。彼らがどのように作ったのか不思議でした。 HEREと表示され、「RapidProで迷惑を掛けています！」をクリックするとメニュー/フォームが表示されます。私はIntuitを使って自分のWebページをデザインしています。これが実際に私の目の前に現れているかどうかは不思議でした。

可能な副題として、RapidShareで表示されるチェックボックスと同様のチェックボックスが付いた見栄えの良い表を作成する簡単な方法はありますか？私は2つの異なる計画を比較し対照するこの方法が本当に好きです。

は、あなたがこのようなポップアップスタイルにしてページを読み込むことができ

エヴァン

Answer 1

はい、その "ポップアップ"の内容は、それをより魅力的にするためのいくつかのCSSを備えたプレーンなHTMLテーブルです。彼らがやっているのは、Javascriptを使ってdivをアニメーション化して画面の中央にポップアップし、cssを使ってうまくスタイルを設定することです。彼らはjQueryのを使用していないカスタムソリューションを持っているように見えるが、同じことを行う多くのフレームワークのプラグインがありますjQueryの

FancyboxやjQueryの

ためprototype.jsの

Lightboxため

• Lightbox
• Colorbox for jQuery

他にもあります。

Answer 2

、読書のためのjQueryでfancybox

Shadowbox

Greybox

探しをありがとうテーブル、ええ、あなたは比較テーブルを作成することができます。彼らはソースコードを見て、あなたが複製するのがより簡単になります。

Answer 3

jqueryでnyroModalを参照すると、HTMLフォームと画像ギャラリーのライトボックスの例が表示されます。 からバンドルをダウンロードします。

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