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() {} | モーダル構造の準備ができたときに実行されるコールバック関数。 |