モーダルの実装でおすすめのプラグインを発見したので紹介します。
直感的な設定で簡単にモダンなモーダル実装ができます。
公式サイト
http://www.humaan.com/modaal/
プレビュー
実装
https://github.com/kei2ro/modaal-practice
これから紹介するソースは上記のリポジトリにて公開していますので、手っ取り早く試したいかたはgit cloneしてお試しください。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Modaal デモページ</title>
<!-- jQuery読み込み-->
<script src="libs/js/jquery.min.js"></script>
<!-- Modaal jsファイル読み込み-->
<script src="libs/js/modaal.js" type="text/javascript"></script>
<!-- Modaal cssファイル読み込み-->
<link rel="stylesheet" href="libs/css/modaal.css"/>
</head>
<body>
<button class="modal-button" style="width:100px;height:60px;border:3px;">Show</button>
<!-- モーダルで表示する部分-->
<div id="modal" style="display:none;">
Inline content goes here...
</div>
<script>
$(".modal-button").modaal({
content_source: '#modal',
fullscreen: true,
});
</script>
</body>
</html>
解説
- jQueryの読み込みが必要です。
- Modaalのjsファイルとcssファイルを読み込んでおきます。
- https://github.com/humaan/Modaal
- ↑今回の実装では、こちらのリポジトリの
source/css/modaal.css,source/js/modaal.jsを使用しました。
- モーダルを出したいボタンに、分かりやすいクラスをつけておきましょう。
- 今回の例では、
modal-buttonというクラスをつけました。
- 今回の例では、
- モーダル表示したいコンテンツにID（今回は
modal)をつけ、display: none;で非表示にしておきましょう。 - scriptタグ内にモーダルの処理を記述します。
- content_sourceに、モーダルのID, 今回はfullscreen表示したいので、fullscreen: trueとします。
まとめ
今回紹介したModaalですが、他にもたくさんオプションがありますので、興味のあるかたは色々とお試しください。
今回は取り上げていないのですが、
iPhoneの実機だと、モーダル内のコンテンツが多くてスクロールなどを要する場合、閉じるボタンがガタガタしてしまうことがありまして、実機で利用する際は注意が必要です。公式のデモを実機で見てみてもわかると思います。
こちらは、暫定の対応として、スクロール中は閉じるボタンを非表示にすることなどで対応できます。
また、モーダルをスクロールする際に、後ろの要素が動いて嫌だという場合は、モーダルが表示されている間だけは背景のコンテンツをfixedなどにしてあげると良いです。
などなど、実運用で使うにはもう少しカスタマイズしたいことなどあるので、余裕があったらそのケースの記事も投稿してみたいと思います。
最後まで読んでいただきありがとうございました。