こんにちは。デザイナーの野尻です。
ブログ機能を実装するときなどは、画像やコンテンツのリンクをモーダル表示にしていい感じにするのは、割と標準装備となっております。
モーダルウィンドウスクリプトの歴史は長く、昔からバージョンアップされてきた伝統的なものもあれば、比較的最近開発されたものもあります。
今回は比較的新しめのスクリプト「modaal」の使い勝手が良かったので紹介したいと思います。
デフォルトでもアクセシビリティに優れたモーダルウィンドウを実装可能
ModaalはWCAG 2.0のレベルAAをサポートしているモーダルウィンドウを実装することができるjQueryプラグインです。要は、デフォルトでも非常に使い勝手に配慮されたクオリティの高いものを実装できるということです。
また、実装もシンプルな記述で動いてくれますので、特にモーダルウィンドウのデザインにカスタムが必要無いサイトに導入すると、クオリティアップにつながるかとおもいます。
反面、細かい調整や機能は割愛されている部分もあるので、がっつりカスマイズしたい場合は、別のスクリプトを使ったほうが良いかもしれません。
導入方法
①GitHubからスクリプト本体をダウンロード
GitHub : https://github.com/humaan/Modaal
からZIPをダウンロードし、解凍します。
この中で使うファイルは下記のふたつだけです。
・modaal.min.js
⇒jsフォルダにいれる
・modaal.css
⇒cssフォルダに入れる
②headに必要ファイルを読み込み
上記の2ファイルをjQuery本体ファイルと共にHTMLの適当な場所に埋め込みます
【例】
※ファイルの読み込み順はmodaal.min.jsよりjQueryを先に読み込ます必要があります。
※スクリプトのあとにモーダル対象を指定するスクリプトを記述しています。今回の場合は「modal」というクラスを指定しました
③htmlを記述
モーダル表示する内容
モーダル表示するコンテンツをidを指定したdivなどで囲みます
※style=”display:none;の記述を忘れずに！これを書いておかないとモーダル表示する前から表示してしまいます
モーダル起動スイッチ部分
aタグのリンク部分に先程作成コンテンツのidを指定し、かつクラスに「modal」（②で指定したクラス）を記述します
モーダルコンテンツ01をオープン
以上！
これだけで動いてくれる（はず）です。
個人的にinlineでhtmlを記述したモーダルを指定できるところが気に入っています。
その他、オプションの設定でモーダル背景色を変えたり、ウィンドウ全体をモーダル領域としたり、これだけで色々できたりします。
詳細はhttps://github.com/humaan/Modaalを参照のこと。。
今後の案件に活かしていきたいと思います。
