ちょこっとモーダル表示に便利なMicromodal.js

ちょこっとモーダル表示に便利なMicromodal.js

「モーダル・ポッポアップ表示したいけど軽量なものが良い」

そんな場合に便利なのが「Micromodal.js」です。

依存がなくjsのみの読み込みだけでOKです。ごちゃごちゃした機能がついていないのでシンプルな実装ができます。

さっそくサンプルとともに使い方を見ていきましょう。

Micromodal.jsの使い方

Micromodalの使い方はマークアップのみです。
公式のサンプルHTMLとマークアップを使用すると以下のようなモーダルが表示されます。

See the Pen Untitled by s-Kuma (@kumatechlab) on CodePen.

CSSは各自でゼロから作成していくことになります。
公式のサンプルをもとに作成していくと簡単にオーバーレイも含めてきれいなモーダルが作成できます。

HTMLもかなり自由に組むことができ、モーダル全体のidと起動用マークアップ、閉じる用のマークアップが最低限あればOKです。

起動用マークアップ

デフォルトでは「data-micromodal-trigger=”モーダルのid”」となっています。

起動用マークアップはボタンなどに設置します。

「data-micromodal-trigger」部分の変更も可能です。(後述)

閉じる用マークアップ

デフォルトでは「data-micromodal-close」となっています。

これが付与された要素をクリックするとモーダルが閉じられます。

最初のサンプルではオーバーレイの黒と×ボタンに付与されています。

初期化

// デフォルトマークアップ使用時はオプション不要
MicroModal.init();

最小構成例)
クリックすると箱が表示され、黒い方をクリックするとモーダルは閉じる。

See the Pen micromodal default by s-Kuma (@kumatechlab) on CodePen.

オプション

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)

いくつかオプションを使用してみた例)

See the Pen micromodal default by s-Kuma (@kumatechlab) on CodePen.

メソッド

javascriptでのモーダル開閉ができるようメソッドも用意されています。

MicroModal.show('modal-id');
MicroModal.close('modal-id');

<