easyModal.jsの使い方 - ほどよい機能のモーダルライブラリ

Programing > easyModal.js

Javascript/jQueryのモーダルウィンドウ用ライブラリを探していたら、easyModal.jsが手ごろな感じだったので、そのメモ。

特徴 †

• leanModal.jsにインスパイア。
• 軽量かつシンプル(200行)。
• だけど、そこそこオプションがそろっている
• 特定のCSSとかimageファイルとかに依存しない
• jQueryプラグイン(1.8.0 以降)
• MITライセンス

デモ †

• http://www.catch.jp/program/easyModal.js/

ダウンロード †

• 本家/マニュアル http://flaviusmatis.github.io/easyModal.js/
• Github http://flaviusmatis.github.io/easyModal.js/

設置方法 †

Javascriptを設置する †

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.easyModal.js"></script>

ダイアログのひな形 †

HTMLファイルに、ダイアログのひな形をおく。

	<!-- Modal template -->
	<div id="modal_alert">
		<h5>アラート</h5>
		<p>* Hello World. This is easyModal.js *</p>
	</div>

cssで非表示にしておく

 	#modal_alert {
 		position: relative;
 		background-color: #fff;
 		box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
 		display: none;
 		padding: 30px;
 		overflow:auto;
 	}

ダイアログの呼び出しボタン †

HTMLファイルに、ダイアログの呼び出しボタンを設置する。

	<button class="open_alert">ダイアログを開く</button>

ダイアログの呼び出しコード †

Javascriptで、ダイアログの呼び出しコードを記述する。

	$(function() {
		<!-- # Alert -->
		$("#modal_alert").easyModal();
		
		$('.open_alert').click(function(e){
			$('#modal_alert').trigger('openModal');
			e.preventDefault();
		});	
	});

オプション †

そこそこオプションが充実しています。

オプションの指定 †

こんな感じで、オプションを指定できる。

$(function() {
	$(selector).easyModal({
		top: 100,
		autoOpen: true,
		overlayOpacity: 0.3,
		overlayColor: "#333",
		overlayClose: false,
		closeOnEscape: false
	});
});

オプションの種類 †

こんなオプションがあります。

• top
  • モーダルウィンドウのトップのオフセットを指定。整数
  • デフォルト "auto"
• autoOpen
  • true にすると、初期化のあとモーダルを自動でオープン
  • デフォルト false
• overlayOpacity
  • 背景(オーバーレイ)の不透明度を設定
  • デフォルト 0.5
• overlayColor
  • 背景(オーバーレイ)の色を設定
  • デフォルト "#000"
• overlayClose
  • falseにすると、背景(オーバーレイ)のクリックで、モーダルを閉じない
  • デフォルト true
• overlayParent
  • カスタムペアレントをセットする
  • デフォルト "body"
• closeOnEscape
  • falseにすると、ESCキーを押したとき、モーダルを閉じない
  • デフォルト true
• closeButtonClass
  • モーダルに配置された閉じるボタンのクラス
  • デフォルト ".close"
• onOpen
  • モーダルが開いた時に呼ばれるコールバック関数
  • 引数 the modal window

$(function() {
	$(selector).easyModal({
		overlayClose: false,
		onOpen: function(myModal){
			$(myModal).append('Opened!');
		}
	});
});

• onClose
  • モーダルが閉じた時に呼ばれるコールバック関数
  • 引数: the modal window

$(function() {
	$(selector).easyModal({
		overlay : 0.4,
		onClose: function(myModal){
			$(myModal).append('Closed!');
		}
	});
});

• zIndex
  • モーダルのz-indexの計算で呼ばれる関数
  • デフォルト: ページ+1内で最も高いz-indexを返します。
• updateZIndexOnOpen
  • z-indexは、モーダルを開くときに計算するべきだが、このオプションをfalseにすると、初期化したときに計算してセットする。
  • Wheter the z-index should be calculted, using the zIndex function, before the modal opens. When set to false, the z-index is calculated and set once on initialization.
  • デフォルト true
• hasVariableWidth
  • 可変幅のモーダルを使いたい時(60%とか)、これを true にすると、いつでも確実に中央に配置する
  • デフォルト false

カスタマイズ †

プラグインの中をいじる方法

モーダルダイアログを、スクロールできるようにするには †

85行目あたり「$modal.css」の「'position': 'fixed',」を

$modal.css({
  'display': 'none',
  'position': 'fixed',

「'position' : 'absolute',」に変更する。末尾のコンマをお忘れなく。

$modal.css({
  'display': 'none',
  'position' : 'absolute',