【モーダルウィンドウ】JSライブラリmodaalの使い方

デモはこちら
CODEPENで見る

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

必要なファイル

modaal

  • jQuery
  • modaal[JS]
  • modaal[CSS]
  • 自前のJSファイル

実装してみよう

モーダルを簡単に実装できる「modaal」というJavaScriptライブラリです。
画像やYouTubeなどのiframeなども簡単にモーダル表示してくれます。 

①下記のコードを<head>内に張り付け
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css" >

②実装箇所に記述
<a class="modal" href="#inline_1">クリックで表示</a>
<div class="none" id="inline_1">
  <p>モーダルが表示されました！</p>
</div>

③BODYの前で読み込み
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>
  <script src="自前のファイル.js"></script>
</body>

aタグのhref属性#inline_1とdivのid属性inline_1が連動しています。この場合inline_1を2,3と増やしていくことで複数の実装が可能です。

.none {
  display: none;
}

divのは読み込み時表示されないように非表示にしておきましょう

自前のJSファイルに記述
$(function(){
  $(".modal").modaal({
    // optionを付ける場合はここに記入
  });
});

aタグのclass属性=>.modalをクリックすることでmodaalが動作します。また。その他オプションがある場合はコメントの中の「optionを付ける場合はここに記入」の箇所に記述します。

動かない時のチェック項目

jQueryが読み込まれているか

modaalの[JS]もしくは[CSS]が読み込まれているか。

href属性と、id属性が一致しているか

aタグのclass属性と、JSファイルの属性が一致しているか

まとめ

モーダルは処理に時間のかかるものを非表示にしておくことでページの読み込みスピードを上げることが出来ます。

また、ユーザーに必ず見てもらいたいときや、注意を引きたい時にもよく使用されます。

機能実装一覧

スポンサーリンク