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

• DEMO
• DOWNLOAD

設定方法

Javascriptの設定

[sourcecode language=’javascript’]


[/sourcecode]

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

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

[sourcecode language=’html’]

[/sourcecode]

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

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

[sourcecode language=’html’]

[/sourcecode]

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

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

スクロールを出す

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

[sourcecode language=’html’]

[/sourcecode]

内部構造

HTML構造

[sourcecode language=’html’]

//透過の背景

[/sourcecode]

CSS指定

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

[sourcecode language=’css’]
#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;
}
[/sourcecode]

自由に改変して下さい

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

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