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

モーダルボックスとページに奥行きを与えることを考えたコンセプト「Avgrund」を非対応ブラウザの処理やより簡単に実装できるように実用化したjQueryのプラグインを紹介します。

サイトのキャプチャ

Avgrund Modal

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

});

top of page

©2017 coliss