- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > easyModal.js
#title("easyModal.jsの使い方 - ほどよい機能のモーダルライブラリ")
Javascript/jQueryのモーダルウィンドウ用ライブラリを探していたら、easyModal.jsが手ごろな感じだったので、そのメモ。
- leanModal.jsにインスパイア
- もう少し機能がそろっている
以下、書きかけ。
#contents
* 特徴 [#de95c6ee]
- leanModal.jsにインスパイア。軽量かつシンプル。
- だけど、そこそこ機能がそろっている
- CSSとかimageファイルとか不要
- jQueryプラグイン(1.8.0 以降)
- MITライセンス
* デモ [#d5c0f91a]
* ダウンロード [#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]
cssで非表示にしておく
** ダイアログの呼び出しボタン [#l22cd31f]
** ダイアログの呼び出しコード [#v3ef604a]
$(function() {
$(selector).easyModal();
});
* オプション [#uf46c8be]
そこそこオプションが充実しています。
** オプションの指定 [#xa15f341]
こんな感じで、オプションを指定する
$(function() {
$(selector).easyModal({
top: 100,
autoOpen: true,
overlayOpacity: 0.3,
overlayColor: "#333",
overlayClose: false,
closeOnEscape: false
});
});
** オプションの種類 [#z3e3935e]
こんなオプションがあります。
- top - Sets the top offset of your modal window, accepts any integer value.
- top
-- モーダルウィンドウのトップのオフセットを指定。整数
-- デフォルト "auto"
- autoOpen - If set true, the modal will be opened immediately after initialization.
- autoOpen
-- true にすると、初期化のあとモーダルを自動でオープン
-- デフォルト false
- overlayOpacity - Sets the overlay opacity.
- overlayOpacity
-- 背景(オーバーレイ)の不透明度を設定
-- デフォルト 0.5
- overlayColor - Sets the color of the overlay.
- overlayColor
-- 背景(オーバーレイ)の色を設定
-- デフォルト "#000"
- overlayClose - If set false, the modal will not be closed when the overlay is clicked.
- overlayClose
-- falseにすると、背景(オーバーレイ)のクリックで、モーダルを閉じる
-- デフォルト true
- overlayParent - Sets a custom parent for your modal.
- overlayParent
-- カスタムペアレントをセットする
-- デフォルト "body"
- closeOnEscape - If set false, the modal will not be closed when the escape key is pressed.
- closeOnEscape
-- falseにすると、ESCキーを押すと、モーダルを閉じる
-- デフォルト true
- closeButtonClass - The class of your close buttons included in the modal.
- closeButtonClass
-- モーダルに配置された閉じるボタンのクラス
-- デフォルト ".close"
- onOpen - Callback function called when the modal is opened.
- onOpen
-- モーダルが開いた時に呼ばれるコールバック関数
-- 引数 the modal window
$(function() {
$(selector).easyModal({
overlayClose: false,
onOpen: function(myModal){
$(myModal).append('Opened!');
}
});
});
- onClose - Callback function called when the modal is closed.
- onClose
-- モーダルが閉じた時に呼ばれるコールバック関数
-- 引数: the modal window
$(function() {
$(selector).easyModal({
overlay : 0.4,
onClose: function(myModal){
$(myModal).append('Closed!');
}
});
});
- zIndex - Function called for calculating the modal z-index.
-- デフォルト The default function returns the highest z-index for any element in the page + 1.
- updateZIndexOnOpen - 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.
- 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 - If you're planning to use a modal with variable width (e.g. 60%), set this to true in order to get it correctly centered at all times.
- hasVariableWidth
-- 可変幅のモーダルを使いたい時(60%とか)、これを true にすると、いつでも確実に中央に配置する
-- デフォルト false
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
