シンプルなモーダルを表示します。

See the Pen モーダル by jun (@zionboogie) on CodePen.

JavaScriptから呼び出しているCSSクラスにはjs-というプレフィックスをつけています。複数のモーダルを用意する際は、js-modalから始まるクラスを変更してください。たとえば、CodePenの参考コードでは2つのモーダルを使っていますが、1つ目はデフォルトの名前で、2つ目はjs-modal-testというようにプレフィックスに-testを追加しています。

a(href="#").js-modal-open 開く
↓
a(href="#").js-modal-test-open 開く

変更が必要なクラスは下記です。

• .js-modal
• .js-modal-open
• .js-modal-close
• .js-modal-outer
• .js-modal-close

詳しくはCodePenの参考コードを参照してください。

デザインのカスタマイズは-sampleクラスを削除し、代わりに新しいクラスを設定してください。それ以外のクラスはモーダルに必要な設定となっているので、変更する際は注意ください。

次のモーダルは画像ギャラリー用です。

See the Pen 画像用モーダル by jun (@zionboogie) on CodePen.

SCSS、JavaScriptについてはシンプルなモーダルとほぼ同じです。HTMLコードはかなり変わっていますが、ほぼ同じクラス名を使っています。次のようにData属性の名前をgalleryにすると自動的に画像ギャラリーとして扱われます。

div(data-gallery="1").modal.js-modal.js-modal-close