jQueryでモーダルウィンドウのプラグインを自作したので公開します。

Javascript

2011.06.06

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

設定方法

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でモーダルウィンドウのプラグインを自作したので公開します。
オススメ本(既読)
読んでみたい本(未読)

COMMENT PLEASE!!

トラックバック

「jQueryでモーダルウィンドウのプラグインを自作したので公開します。」のトラックバックURL
http://web-park.org/javascript/modalwindow1106.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook