モーダルを簡単に実現させるJavaScript「Reveal」

一度開いたダイアログボックスを閉じるまで、他の操作をできなくするモーダルを簡単に取り入れるJavaScriptReveal: jQuery Modal Plugin from ZURBを紹介します。

使用方法

Reveal: jQuery Modal Plugin from ZURBからファイル一式をダウンロード。

<link rel="stylesheet" href="reveal.css" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').reveal({{
		animation: 'fadeAndPop', //アニメーション（fade, fadeAndPop, noneの3種類）
		animationspeed: 300 //スピード
	});
});
</script>
あとは表示する際のリンクボタンと内容を下記のように記述します。

<a href="#" data-reveal-id="id名">クリック！</a>
<!-- モーダルの中身 -->
<div id="id名" class="reveal-modal">
	コンテンツ
	<!-- 閉じるボタン -->
     <a class="close-reveal-modal">×</a>
</div>

サンプル

クリック！

Modal Title

Any content could go in here.

jQueryプラグイン一覧はこちら ×

Javascriptサンプルページ一覧
skuare.net