世の中にはjQueryで動くモーダルウィンドウプラグインがたくさんあるのに、自作しました！
理由は、あがってくるデザインを実現するには自作するしかなかったからです。
せっかくなので公開します。

• DEMO
• DOWNLOAD

設定方法

Javascriptの設定

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="../js/jquery.simplaModalwindow.js"></script>

モーダルウィンドウを表示させるアンカーにクラス指定

アンカーのクラスに「modal」を指定すればモーダルウィンドウが表示されます。

<a class="modal" href=""></a>

モーダルウィンドウのサイズ指定

サイズはCSSもしくは、アンカーのhrefで指定出来ます。
画像の場合はhrefのリンク先の画像サイズをそのまま返しますが、
外部HTMLやページ内のコンテンツにはサイズ指定が必要です。

<a class="modal" href="test.html?width=300&height=300"></a>

表示させるファイルやコンテンツの後に「?」を入れて、「width」「height」を指定します。

※パラメーターは最初「?」だが、その後は「&」で繋げる

スクロールを出す

サイズの指定方法と同じですが、イコールの後に「yes」を入れるだけです。
ただ、縦軸にしかスクロールしません。（個人的に横スクロールは使いにくいので入れてません！）

<a class="modal" href="test.html?scroll=yes"></a>

内部構造

HTML構造

<div id="overLay"></div>//透過の背景
<div id="displayContent">
	<div id="getContents">
	//読み込まれた要素が入る
	</div>
	<img src="../img/btn_close.png" alt="CLOSE" />//閉じるボタンの画像
</div>

CSS指定

hrefでサイズ指定していない場合は、CSSの#displayContentで指定したサイズが適用されます。

#overLay {
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: #fff;
	z-index: 500;
}
#displayContent {
	position: absolute;
	top:50%;
	left:50%;
	margin: -50px 0 0 -50px;
	padding: 20px 40px 20px 20px;
	_padding: 20px;
	width: 100px;
	height: 100px;
	z-index: 600;
}
#getContents {
	padding: 10px;
	width: 100%;
	height: 100%;
	background: #fff;
	border: solid #ccc 2px;
}
#closeBox {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
}

自由に改変して下さい

構造は簡単なので自由に改変して、自分のデザインに合わせた動きを実装してみて下さい。

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryでモーダルウィンドウのプラグインを自作したので公開します。