- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > easyModal.js
#title("easyModal.jsの使い方 - ほどよい機能のモーダルライブラリ")
Javascript/jQueryのモーダルウィンドウ用ライブラリを探していたら、easyModal.jsが手ごろな感じだったので、そのメモ。
#contents
* 特徴 [#de95c6ee]
- leanModal.jsにインスパイア。
- 軽量かつシンプル(200行)。
- だけど、そこそこ機能がそろっている
- CSSとかimageファイルとか不要
- だけど、そこそこオプションがそろっている
- 特定のCSSとかimageファイルとかに依存しない
- jQueryプラグイン(1.8.0 以降)
- MITライセンス
* デモ [#d5c0f91a]
- http://www.catch.jp/program/easyModal.js/
* ダウンロード [#i6f93ec9]
- 本家/マニュアル http://flaviusmatis.github.io/easyModal.js/
- Github http://flaviusmatis.github.io/easyModal.js/
* 設置方法 [#i1ab0190]
** Javascriptを設置する [#lcc24d74]
<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.easyModal.js"></script>
** ダイアログのひな形 [#n7ed985e]
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;
}
** ダイアログの呼び出しボタン [#l22cd31f]
HTMLファイルに、ダイアログの呼び出しボタンを設置する。
<button class="open_alert">ダイアログを開く</button>
** ダイアログの呼び出しコード [#v3ef604a]
Javascriptで、ダイアログの呼び出しコードを記述する。
$(function() {
<!-- # Alert -->
$("#modal_alert").easyModal();
$('.open_alert').click(function(e){
$('#modal_alert').trigger('openModal');
e.preventDefault();
});
});
* オプション [#uf46c8be]
そこそこオプションが充実しています。
** オプションの指定 [#xa15f341]
こんな感じで、オプションを指定できる。
$(function() {
$(selector).easyModal({
top: 100,
autoOpen: true,
overlayOpacity: 0.3,
overlayColor: "#333",
overlayClose: false,
closeOnEscape: false
});
});
** オプションの種類 [#z3e3935e]
こんなオプションがあります。
- top
-- モーダルウィンドウのトップのオフセットを指定。整数
-- デフォルト "auto"
- autoOpen
-- true にすると、初期化のあとモーダルを自動でオープン
-- デフォルト false
- overlayOpacity
-- 背景(オーバーレイ)の不透明度を設定
-- デフォルト 0.5
- overlayColor
-- 背景(オーバーレイ)の色を設定
-- デフォルト "#000"
- overlayClose
-- falseにすると、背景(オーバーレイ)のクリックで、モーダルを閉じる
-- falseにすると、背景(オーバーレイ)のクリックで、モーダルを閉じない
-- デフォルト true
- overlayParent
-- カスタムペアレントをセットする
-- デフォルト "body"
- closeOnEscape
-- trueにすると、ESCキーを押したとき、モーダルを閉じる
-- 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
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
