[JS]奥行きを与えてモーダルボックスを開くスクリプトを実用化したスクリプト -Avgrund Modal

サイト構築 -JavaScript

Post on:2012年8月31日

Avgrund Modalの元

スクリプトの元はAvgrundで、こちらはモーダルボックスとページに奥行きを与えることを考えたコンセプトです。

元となった：Avgrund

作者のメモには、実用のためではなく楽しむ用、とのことで、確かにIEなどの非対応ブラウザではエラーがでるだけです。
「Avgrund Modal」は、非対応ブラウザの処理やより簡単に実装できるように実用化したものです。

Avgrund Modalのデモ

デモは全てのモダンブラウザで動作します。

デモページ

「Show It」ボタンをクリックすると、モーダルボックスを表示し、ページとボックスにアニメーションで奥行きを与えます。

デモページ：ボックスを表示

CSSアニメーションをサポートしないIE6-9は、奥行きのアニメーションは無しになります。

デモページ：IE7で表示

Avgrund Modalの使い方

Step 1: 外部ファイル

スタイルシートをhead内に記述します。

<link rel="stylesheet" href="avgrund.css">

「jquery.js」と当スクリプトを</body>の上あたりに記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.avgrund.js"></script>

Step 2: HTML

モーダルボックスを開くボタンを設置します。

<a href="#" id="show">Show it</a>

Step 3: JavaScript

ボタンをjQueryのセレクタで指定し、スクリプトを実行します。

$('#show').avgrund();

モーダルボックスのデザインやコンテンツはスクリプトに記述します。

$('#show').avgrund({
	width: 380, // 最大640px
	height: 280, // 最大350px
	showClose: false, // 閉じるボタンの有無 
	showCloseText: '', // 閉じるボタンのテキスト
	holderClass: '', // class名のカスタマイズ
	overlayClass: '', // オーバーレイのclass名
	enableStackAnimation: false, // アニメーションのタイプ
	template: '<p>コンテンツ</p>' +
	'<div>' +
	'<a href="#">リンク</a>' +
	'</div>'

});