iziModal

jqueryプラグイン「iziModal」で柔軟性のあるモーダルウィンドウを実装する!

DEMO

See the Pen
iziModal
by nerdspec (@nerdspec)
on CodePen.


オプション

オプション名 デフォルト値 説明
title モーダルのヘッダーのタイトル
subtitle モーダルのタイトルの下のキャプション。
headerColor ‘#6d7d8d’ ヘッダーの背景を塗りつぶす色は、モーダルの下端にも適用されます。
background ‘null’ モーダル背景。
theme モーダルのテーマ、空またはライトにすることができます
attached DEPRECIATED 画面の上部または下部にモーダルを添付します。
appendTo NEW ‘.body’ モーダルはどこに配置されますか?
appendToOverlay NEW ‘.body’ モーダルオーバーレイはどこに配置されますか?
icon null モーダルヘッダーに表示されるアイコンクラス(選択したフォントアイコン)。
iconText null モーダルヘッダーに表示されるアイコンテキスト(テキストを使用したフォントアイコン)。
iconColor ヘッダーアイコンの色。
rtl false 右から左へのオプション。
width 600 モーダルの固定幅。 「%」、「px」、「em」または「cm」を使用できます。測定単位を使用しない場合、「PX」が測定単位として想定されます。
top NEW null 上部の静的マージン。
bottom NEW null 下の静的マージン。
borderBottom true 境界線の下部を有効/無効にします。
padding 0 内部マージン。(別途CSSで「.iziModal-content{box-sizing:border-box;}」を設定しないとはみ出るようです。)
radius 3 角丸半径
zindex 999 モーダルのz-index CSS属性。
iframe false trueの場合、モーダル内でIframeが使用されます。
iframeHeight 400 iframeの高さ
iframeURL null モーダル内のiframeで開くアドレス。設定されていない場合、hrefにリンクを使用できます。
focusInput true trueに設定すると、モーダルを開くたびに、最初の表示フィールドがアクティブになります。
group 同じ「グループ」名でグループを作成し、グループ間を移動できるようにします。
loop false 同じグループのモーダルでループすることができます。
arrowKeys NEW true 矢印キーによる制御を有効にします。
navigateCaption true ナビゲートする矢印を表示します。
navigateArrows true 矢印の位置を変更して、モーダル間を移動します。 「 ‘closeToModal’」または「 ‘closeScreenEdge’」のいずれかです。
history false ハッシュで閲覧履歴を有効にします。
restoreDefaultContent false モーダルをデフォルトにリセットして、再度開きます。
autoOpen 0 or false trueの場合、モーダルは任意のユーザーアクションで自動的に開きます。または、開くまでの遅延時間(ミリ秒単位)を設定できます。
bodyOverflow false モーダルを開き、モーダルを閉じると、ドキュメントにオーバーフローが強制的に隠され、オーバーフローが復元されます。
fullscreen false モーダルヘッダーにボタンを表示して展開します。
openFullscreen false フルスクリーンでモーダルを強制的に開きます。
closeOnEscape true trueに設定すると、エスケープキーを押すだけでモーダルを閉じることができます。
closeButton NEW true ヘッダーに閉じるボタンを表示します。
overlay true 背景オーバーレイを有効または無効にします。
overlayClose true trueに設定すると、モーダルはその外側をクリックして閉じられます。
overlayColor ‘rgba(0,0,0,0.4)’ オーバーレイの色
timeout 0 or false モーダルを閉じるミリ秒単位の量、無効にする場合はfalse。
timeoutProgressbar false タイムアウトプログレスバーを有効にします。
timeoutProgressbarColor ‘rgba(255,255,255,0.5)’ 進行状況バーの色
pauseOnHover false マウスカーソルがモーダルにカーソルを合わせたときにプログレスバーを一時停止します。
transitionIn ‘comingIn’ モーダルオープニングのデフォルトトランジション。 「comingIn、bounceInDown、bounceInUp、fadeInDown、fadeInUp、fadeInLeft、fadeInRight、flipInX」のいずれかです。
transitionOut ‘comingOut’ モーダルクローズの遷移。 「comingOut、bounceOutDown、bounceOutUp、fadeOutDown、fadeOutUp 、、 fadeOutLeft、fadeOutRight、flipOutX」のいずれかです。
transitionInOverlay ‘fadeIn’ オーバーレイの遷移。
transitionOutOverlay ‘fadeOut’ オーバーレイクロージャのデフォルト遷移。
onFullscreen function() {} モーダルが全画面表示を有効または無効にするときに実行されるコールバック関数。
onResize function() {} サイズ変更が発生したときに実行されるコールバック関数。
onOpening function() {} モーダルを開くときに実行されるコールバック関数。
onOpened function() {} モーダルが開いているときに実行されるコールバック関数。
onClosing function() {} モーダルを閉じるときに実行されるコールバック関数。
onClosed function() {} モーダルが閉じられたときに実行されるコールバック関数。
afterRender NEW function() {} モーダル構造の準備ができたときに実行されるコールバック関数。