モーダル用jQueryプラグインをつくった

なかなか理想のモーダル用スクリプトが見つからなかったので勉強を兼ねて作ってみた。
なるべく実用的なものにしたつもり・・・。

ソースは Github にあり〼。

使用例 (examples)

インライン要素 (inline)

<!-- 発火するリンク -->
<a href="#demo1" class="modaled">インライン要素 (inline)</a>

<!-- 表示する内容 -->
<div id="demo1" style="display:none">
	...
</div>

<!-- スクリプト -->
<script>
$('.modaled').modaled();
</script>

別ページ ※同ドメイン内のみ (ajax)

<!-- 発火するリンク -->
<a href="/static/jquery-modal/demo2.html" class="modaled">別ページ ※同ドメイン内のみ (ajax)<</a>

<!-- スクリプト -->
<script>
$('.modaled').modaled();
</script>

画像 ※別ドメイン可 (image)

<!-- 発火するリンク -->
<a href="http://i.giphy.com/fz9wCNZeff5yU.gif" class="modaled">画像 ※別ドメイン可 (image)</a>

<!-- スクリプト -->
<script>
$('.modaled').modaled();
</script>

内容切り替え (other modal)

<!-- 発火するリンク -->
<a href="#demo4" class="modaled">内容切り替え (other modal)</a>

<!-- 表示する内容 -->
<div id="demo4" style="display:none">
	...
	NEXT : <a href="/static/jquery-modal/demo4.html" class="modaled">demo4.html</a>
</div>

<!-- スクリプト -->
<script>
$('.modaled').modaled();
</script>

モーダル内のヘッダ・フッタ (header and footer)

<!-- 発火するリンク -->
<a href="#demo5">モーダル内のヘッダ・フッタ (header and footer)</a>

<!-- 表示する内容 -->
<div id="demo5" style="display:none">
	...
</div>

<!-- スクリプト -->
<script>
$('a[href="#demo5"]').modaled({
	header: '<i>ヘッダです (header)</i>',
	footer: '<i>フッタです (footer)</i> <a href="#close">CLOSE</a>',
	headerClass: 'ヘッダのclass名',
	footerClass: 'フッタのclass名'
});
</script>

<!-- または、やや強引ですが表示する内容の data-* 属性に直接設定を書くこともできます -->
<div id="demo5" style="display:none" data-header="<i>ヘッダです (header)</i>" data-footer="<i>フッタです (footer)</i>">
	...
</div>

アニメーション例1 (animation example 1)

アニメーション例2 (animation example 2)

アニメーションには Animate.css が必要です
Animate.cssが読み込まれていれば自動的にアニメーション表示になります。

<!-- Animate.cssの読み込み -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css">

<!-- 発火するリンク -->
<a href="#demo6-1">アニメーション例1 (animation example 1)</a>

<!-- 表示する内容 -->
<div id="demo6-1" style="display:none">
	...
</div>

<a href="#demo6-2" data-ac-show="rotateIn" data-ac-hide="hinge">アニメーション例2 (animation example 2)</a>

<div id="demo6-2" style="display:none">
	...
</div>

<!-- スクリプト -->
<script>
$('a[href="#demo6-1"]').modaled({
	acShow: 'bounceIn',
	acHide: 'bounceOut'
});

$('a[href="#demo6-2"]').modaled();
</script>

デザイン例 (design example)

<!-- 発火するリンク -->
<a href="#demo7">デザイン例 (design example)</a>

<!-- 表示する内容 -->
<div id="demo7" style="display:none">
	...
</div>
<!-- スクリプト -->
<script>
$('a[href="#demo7"]').modaled({
	header: '<h3><i class="fa fa-leaf"></i> デザイン例</h3><a href="#close">&times;</a>',
	footer: '<a href="#close"><i class="fa fa-check-circle"></i> 閉じる</a>',
	containerClass: 'my-modal',
	headerClass: 'my-header',
	footerClass: 'my-footer',
	contentClass: 'my-content',
});
</script>

オーバーレイのクリックで閉じさせない (disable overlay click)

<!-- 発火するリンク -->
<a href="#demo8-1" class="modaled">オーバーレイのクリックで閉じさせない (disable overlay click)</a>

<!-- 表示する内容1 -->
<div id="demo8-1" style="display:none" data-overlay-hide-disable="true">
	...
</div>

<!-- 表示する内容2(クリック後) -->
<div id="demo8-2" style="display:none" data-auto-hide="2000">
	...
</div>

<!-- スクリプト -->
<script>
$('.modaled').modaled();
</script>

ダイナミック表示 (dynamic open)

最初に表示されたものです。

<!-- スクリプト -->
<script>
$.modaled('Welcome!<br>これはモーダルの見本です。<br><a href="#close">CLOSE</a>');
</script>

特徴 (feature)

  • IE8+
  • レスポンシブ
  • Animate.css 対応
  • ダイナミック表示対応

オプション (options)

  • header - default: empty
    ヘッダ用HTML
  • footer - default: empty
    フッタ用HTML
  • containerClass - default: ‘modal-container’
    表示モーダル全体を包む<div>のclass名
  • headerClass - default: empty
    ヘッダのclass名(ヘッダがある場合)
  • footerClass - default: empty
    フッタのclass名(フッタがある場合)
  • contentClass - default: empty
    表示コンテンツ部分のclass名
  • overlayHideDisable - default: false
    オーバーレイクリックで閉じさせないかどうか
  • overlayOpacity - default: 0.2
    オーバーレイの透明度
  • autoHide - default: 0
    自動で閉じる場合のミリ秒(ms)
  • preload - default: false
    リンクコンテンツの場合に先読みするかどうか
  • acShow - default: ‘fadeInDown’
    モーダル表示時のアニメーションclass名(Animate.css)
  • acHide - default: ‘fadeOutDown’
    モーダルを閉じる時のアニメーションclass名(Animate.css)
  • acChangeHide - default: ‘flipOutY’
    モーダル切り替え時に非表示にするアニメーションclass名(Animate.css)
  • acChangeShow - default: ‘flipInY’
    モーダル切り替え時に表示するアニメーションclass名(Animate.css)
  • acSpinShow - default: ‘zoomIn’
    読み込み中(loading)表示するアニメーションclass名(Animate.css)
  • acSpinHide - default: ‘zoomOut’
    読み込み中(loading)を非表示にするアニメーションclass名(Animate.css)
  • acOverlayHideDisable - default: ‘wobble’
    オーバーレイクリック拒否時のアニメーションclass名(Animate.css)
  • beforeShow - default: null
    モーダル表示直前に実行される関数
  • afterShow - default: null
    モーダル表示直後に実行される関数
  • beforeClose - default: null
    モーダル非表示直前に実行される関数
  • afterClose - default: null
    モーダル非表示直後に実行される関数

デフォルトオプションの設定方法は以下です。

$.modaled.defaults({
	header: '<div class=" ...',
	overlayOpacity: 0.3,
	beforeShow: function(content, option) {
		...
	}
	...
});