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

https://www.catch.jp:443/wiki/index.php?easyModal.js

Programing > easyModal.js

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

特徴

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

デモ

ダウンロード

設置方法

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

  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-10-20 (金) 23:54:55 (857d)