日常のあれこれ。

フリーのフロントエンジニア。サーバーサイドも現在勉強中...webデザイン・フロントエンド・イラスト作成・LP用漫画作成を主なシゴトとしています＾＾日々学んだことをアウトプットしていきます。

モーダルウィンドウの実装が簡単にできる「Modaal」の使い方

jQuery HTML

f:id:creat4869:20190724144937p:plain

モーダルウィンドウを簡単に作りたいと思ったので、

めちゃ簡単におしゃれなモーダルウィンドウが作れる『Modaal』を使用してみました。



手順は以下です＾＾


必要なファイルをダウンロードする

以下のリンクからファイルをダウンロードします。

以下のページの「Clone or download」という緑色のボタンを押し、

「Download ZIP」からダウンロードをする。



リンク：https://github.com/humaan/Modaal



ダウンロードをするとたくさんファイルが出てきますが、使用するものは



・modaal.min.css

・modaal.min.js



の二つです！


headからファイルを読み込む

ダウンロードしたファイルを適当なディレクトリに入れます。

そのファイルをheadで以下のように読み込みます。


<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="modaal.min.css">
 <script src="modaal.min.js"></script>
</head>

ここで、jQuery本体も読み込んでいなければ、読み込みましょう。

モーダルウィンドウのHTMLを記述する

htmlファイルに、『押したらモーダルウィンドウを表示させるボタン』と、『モーダルウィンドウ』を以下のように記述します。

<a href="#modal" class="modal">モーダルウィンドウを開く</a>
<div id="modal">モーダルウィンドウの中身</div>

開くボタンの方には、classをつけ、hrefで下のdivに飛ぶようにします。
※class名は好きな名前を付けてもらって大丈夫ですが、次のステップで記述するjQueryのセレクタも同じように変更する必要があります。

jQueryを記述する

jsファイルに以下を記述します。

$(function(){
  $('.modal').modaal();
});

セレクタの部分は上で言ったように、モーダルウィンドウを飛び出すボタンに付けたclass名と同じものを入れます。


これだけで、リンクを押すとモーダルウィンドウが表示されると思います＾＾
レスポンシブ対応もしているので、とても便利です！