サイトに来てくれたユーザーにぜひこれを見てほしいと行った時、注目を集めるためモーダルウィンドウを実装する場合、背景がグレイになって表示させるとった画面構成が一般的ですが、iziModalを実装すればおしゃれで機能的なモーダルウィンドウが実装できます。レスポンシブにも対応しています。

実装方法とサンプル

公式サイトからファイルをダウンロードしてください。

実装したいファイルにcssファイルとjsファイルを設定。ファイルパスの指定は各環境によって指定してください。jQueryの設定も忘れないでください。

<link rel="stylesheet" href="css/iziModal.min.css" type="text/css" />

<script src="iziModal.min.js"></script>

See the Pen dyMeLYX by AkiraSatou (@SatoWeb) on CodePen.light

“デフォルトのモーダル表示”だとよくみるモーダルの表示だと思います。

“オプションを指定したモーダル表示”では、ヘッダーがあり、サブタイトルを入力することが可能です。オプションはjsコードを参照してください。

“グループを指定してモーダル表示”では、モーダル画面の両脇に矢印が表示されて、同一のクラス名（ここでは“iziModal_group”）で指定したオプション『group: “group01″』の設定でまとめられたものが表示されます。

ヘッダーや背景の色などはcssでお好みに設定してください。

オプション

サンプルでいくつかオプションを実装していますが、他にもたくさん用意がされていますので、公式サイトからご確認ください。

今回のサンプルでは文字と画像を表示しましたが、iframeを使用したYouTubeなど動画も表示できますので、気になる方はお試しください。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。