フロントエンド開発Blog

オレには鈍器がある

JavaScript , Lightbox , UI , modal , クロスブラウザ

[jQuery]シンプルなモーダルUI

概要:
・多種多様なデバイス、ブラウザで動作するシンプルなモーダル機能を提供します
・コールバックを自作することで多種多様なニーズに答えられるように配慮しました
・CSSを変更するとレガシーなIEでも動作すると思います
・デバイスの傾きやリサイズに対応しています
・レスポンシブWEBデザインが適用されたサイトへの組み込みテストも実施したところ、私の環境では正常に動作しました
※とはいえ全てのサイト、全てのデバイスで動作するかは不明です

http://jsdo.it/oredon/aReY

Options:
指定可能なオプション項目とその例
{
modalId: "simple_modal", //モーダルのIdを機能毎に分けておくと複数同時起動に便利です
bgId: "simple_modal_bg", //背景として出現させる要素のId
closeSelector: ".simple_modal_close", //閉じるアクションを付加するオブジェクトのセレクタ
duration: 300, //フェードイン・アウトの時間
modalWindowMarginTopMin: 20, //モーダルの最小上マージン
modalWindowMarginSide: 20, //モーダルの左右マージン
beforeShowContent: function($modalWrapper, $modalWindow, options, $trigger) {},//表示前に実行(引数 $modalWrapper:背景含むモーダルオブジェクト全体, $modalWindow:モーダルウィンドウ, options: オプション, $trigger: トリガー)
afterShowContent: function($modalWrapper, $modalWindow, options, $trigger) {}, //表示後に実行
beforeHideContent: function($modalWrapper, $modalWindow, options, $trigger) {},//閉じる前に実行
afterHideContent: function($modalWrapper, $modalWindow, options, $trigger) {}, //閉じた後に実行
fixedTopPx: null //top値を固定したい場合は数値を入力します
}
※before,afterコールバックで任意の処理を追加できます


確認済み端末:
(PC)
・IE11
・Firefox
・Google Chrome
・Safari
(タブレット、SP)
・ios 6~7 safari, chrome
・Android 2.2~4.2 標準ブラウザ, chrome

ページトップへ

関連ページ

ページトップへ