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

モーダルを簡単に実現させる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>

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

sponsors

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

記事作成:
記事URL:

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