ちょこっとモーダル表示に便利なMicromodal.js
「モーダル・ポッポアップ表示したいけど軽量なものが良い」
そんな場合に便利なのが「Micromodal.js」です。
依存がなくjsのみの読み込みだけでOKです。ごちゃごちゃした機能がついていないのでシンプルな実装ができます。
さっそくサンプルとともに使い方を見ていきましょう。
Micromodal.jsの使い方
Micromodalの使い方はマークアップのみです。公式のサンプルHTMLとマークアップを使用すると以下のようなモーダルが表示されます。
CSSは各自でゼロから作成していくことになります。公式のサンプルをもとに作成していくと簡単にオーバーレイも含めてきれいなモーダルが作成できます。
HTMLもかなり自由に組むことができ、モーダル全体のidと起動用マークアップ、閉じる用のマークアップが最低限あればOKです。
起動用マークアップ
デフォルトでは「data-micromodal-trigger=”モーダルのid”」となっています。
起動用マークアップはボタンなどに設置します。
「data-micromodal-trigger」部分の変更も可能です。(後述)
閉じる用マークアップ
デフォルトでは「data-micromodal-close」となっています。
これが付与された要素をクリックするとモーダルが閉じられます。
最初のサンプルではオーバーレイの黒と×ボタンに付与されています。
初期化
// デフォルトマークアップ使用時はオプション不要MicroModal.init();
最小構成例)クリックすると箱が表示され、黒い方をクリックするとモーダルは閉じる。
オプション
Micromodalではいくつかオプション・フックを利用することができます。
- onShow・・・モーダルが開かれた時に呼び出されます。
- onClose・・・モーダルが閉じられた時に呼び出されます。
- openTrigger・・・起動用マークアップを指定できます。(デフォルト： data-micromodal-trigger)
- closeTrigger・・・閉じる用マークアップを指定できます。(デフォルト： data-micromodal-close)
- openClass・・・モーダルが開かれているときに付与されるクラス名を指定できます。(デフォルト： is-open)
- disableScroll・・・モーダル起動時のスクロールを禁止することができます。(デフォルト： false)
- disableFocus・・・モーダル起動時に最初の要素にフォーカスされるのを止めることができます。(デフォルト： false)
- awaitOpenAniamtion・・・モーダル起動時のアニメーションを待ってから最初の要素にフォーカスされます。(デフォルト： false)
- awaitCloseAnimation・・・モーダルを閉じられるときにアニメーションを待ちます。(デフォルト： false)
- debugMode・・・trueの場合コンソールの警告を抑制します。(デフォルト： false)
いくつかオプションを使用してみた例)
メソッド
javascriptでのモーダル開閉ができるようメソッドも用意されています。
MicroModal.show('modal-id');MicroModal.close('modal-id');