簡単にモーダルを実装できるライブラリmodaal.js│株式会社シーポイントラボ

何かボタンが押されたときや、イベントが発生した際に、表示中の画面の手前にオーバーレイで表示されるポップアップのことを”モーダル”と呼びますが、このモーダルを素のjavascriptで一から記述するのが、実はちょっと大変だったりします。

モーダルを作るには例として

などといった手順が必要になります。
これを不具合なく早く作るには慣れが必要で、少々時間がかかる作業です。

なので毎回モーダルを一から作成…となると正直あまりやりたくない所ではあります。

こういった「作るのがめんどくさいけど汎用的」な機能については、実はネット上でオープンソースなどでライブラリ化されていることが多いです。

このモーダルの機能も、組み込みやすく、見た目もきれいなjQueryプラグインがリリースされています。

jQueryプラグインなのでjQueryと合わせて使用する必要がありますが、このプラグインを使用することで、基本的に上記の”モーダルの中身の部分のDOMの記述”以外の部分を代わりに担当してくれます。

使い方はまずGitHubからプラグインを入手します。

入手したファイルを解凍すると、中に”source”というフォルダがあり、その中に”js”と”css”という2つのディレクトリが入っているかと思います。

このうち、jsとcssそれぞれのフォルダの中に入っているファイルをサイトのディレクトリにコピーします。

例えば、

ドキュメントルート/path/to/js

にjavascript、

ドキュメントルート/path/to/css

にcssを配置している場合は、jsフォルダの中身を

ドキュメントルート/path/to/js

cssフォルダの中身を

ドキュメントルート/path/to/css

にコピーします。

次に、モーダルを表示させたいページに置いたmodaal.jsのcssとjsファイルを読み込ませます。

headタグ内かその他適切な場所に次のタグを挿入します。
※modaal.jsを呼び出すscriptタグはjQuery本体を呼び出すのscriptタグの後に入れます。

<script src="/path/to/js/modaal.min.js"></script>
<link type="text/css" rel="stylesheet" href="/path/to/css/modaal.min.css">

次にモーダルの中身となる部分のhtmlを記述します。

<div id="modal">
    <!-- モーダルに表示する内容を記述 -->
</div>

合わせて、モーダルを表示させるきっかけとなるaタグを用意します。

href=”” の指定の中には、モーダルを適用したい要素のidもしくはクラスなどのセレクタを記述しておきます。

<a id="modal-visible-link"　href="#modal">モーダル表示</a>

最後に、scriptタグを用意し、その中に次のコードを追加します。

ここのセレクタで指定するのはモーダルを表示させるボタンの要素です。

<script>
    $("modal-visible-link").modaal();
</script>

これで、aタグ部分をクリックすると、リンクが表示されるようになります。

簡単に実装できますので、モーダルの実装を考えている方は是非試してみてください。

簡単にモーダルを実装できるライブラリmodaal.js