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

カテゴリー:JS

タグ:IZIMODAL jquery プラグイン