強火で進め

このブログではプログラム関連の記事を中心に書いてます。

JavaScript(jQuery)でカスタマイズしたモーダルウィンドウを表示するライブラリ「leanModal」

JavaScript jQuery

「leanModal」はカスタマイズしたモーダルウィンドウ(ダイアログ？)を簡単に使えるライブラリです。IE 6は未サポートみたいです。

配布場所

leanModal - a JQuery modal plugin that works with your CSS
http://leanmodal.finelysliced.com.au/

使い方

jQueryが必要なライブラリです。jQueryを先に読み込む様にしましょう。

使用例はこちら。「テスト」ボタンを押すとモーダルウィンドウが表示されます。「閉じる」のリンクかウィンドウ外をクリックすると閉じられます。

HTMLのコードは以下。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });		
		});
	</script>
	<style type="text/css">
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#test_button{
	display:block;
	width:100px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
}

#test_popup {
	width: 300px;
	padding: 20px;

	display:none;
	background: #FFF;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
	</style>
	<title>leanModalのサンプル</title>
</head>
<body>
<a type="button" id="test_button" rel="leanModal" href="#test_popup"><img src="images/button.gif" alt="サンプル"></a>
<!-- ポップアップ表示する内容 -->
	<div id="test_popup">
		<div id="test_header">
			<h2>タイトル</h2>
		</div>
		<div id="test_body">
			<p>本文</p>
			<a class="modal_close" href="javascript:void(0)">閉じる</a>
		</div>
	</div>
<!-- /ポップアップ表示する内容 -->
</body>
</html>

コードの解説

まずは jQuery と leanModal のファイルを読み込みます。

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>

オーバーレイ表示するためのスタイルシートの設定。

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

ボタンの部分のタグはこちら。

<a type="button" id="test_button" rel="leanModal" href="#test_popup"><img src="images/button.gif" alt="サンプル"></a>

ボタンが押された時の処理はここで行っています。表示位置の調整と閉じるボタンに対応する class を設定しています。

		$(function() {
			$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });		
		});

モーダルウィンドウの内容はボタンの href="#test_popup" で指定しており、以下の部分に対応しています。

<!-- ポップアップ表示する内容 -->
	<div id="test_popup">
		<div id="test_header">
			<h2>タイトル</h2>
		</div>
		<div id="test_body">
			<p>本文</p>
			<a class="modal_close" href="javascript:void(0)">閉じる</a>
		</div>
	</div>
<!-- /ポップアップ表示する内容 -->