Google今日は超簡単にポップアップ・ウィンドウを実装できる[Remodal]を紹介します。下記リンク先より、実際の挙動をご確認ください。https://on-ze.com/demo/jquery-remodal/ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。後で紹介するスタイルシートの[remodel-default-theme.css]がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。以下、実装方法を紹介していきます。[Remodal]の必要なファイルを読み込むはじめに[Remodal]の公式サイトより、必要なファイルを入手してきます。ZIP」をクリックするとダウンロードがはじまります。このZIPファイルを解凍すると、いくつかのフォルダとファイルに展開されます。このうち必要になるのは下記の3つのファイル。remodel.min.jsremodel.cssremodel-default-theme.cssこのうち「remodel.js」と「remodel.min.js」の中身は同じです。違いは圧縮されているか否か。通常は「remodel.min.js」のほうを使うのが一般的です。容量が「2KB」と超軽量です。スタイルシートの「remodel.css」にはポップアップ時のオーバーレイなどが記述されていて、もう一方の「remodel-default-theme.css」にはアニメーションの処理が記載されています。各スタイルシートの中身は好きなように書き換えてOK。デザインの微調整はこのCSSで行います。各ファイルを読み込むダウンロードした各ファイルと、jQueryのコアファイルをHTMLの任意の箇所で読み込みます。ここではGoogleのCDNにホストされているjQueryを利用することにします。src="remodal.min.js"></script>このときjquery本体ファイルの[jquery.min.js]は必ず[remodal.min.js]よりも先に読み込むように記述してください。モーダル・ウィンドウを作る続いてポップアップで表示されるモーダル・ウィンドウを作りこんでいきます。class="remodal-close"></button><h1>タイトル</h1><p>コンテンツを記述します。class="remodal-confirm">OK</button></div>ここでのポイントは以下の3点。大枠の要素に独自データ属性data-remodal-id="任意の文字列"を記述しておくこと。ここで指定した値がポップアップさせるアンカー要素と紐づけられます。クラス属性でclass="remodal"も記述しておきます。スタイルシート側でclass="remodal"及びdata-remodal-id="modal"に対して「display:none;」の処理をしているので、通常の状態では非表示になります。モーダル・ウィンドウの中身では「button」要素を使って「確認」「キャンセル」「ウィンドウを閉じる」ボタンを追加できます。方法は独自データ属性のdata-remodal-actionを追加して、それぞれ「close」「cancel」「confirm」の値を付与します。ポップアップを起動させるスイッチを作るポップアップ・ウィンドウを起動させる方法は2パターンあります。アンカータグ(リンク)で起動させるJavaScriptで起動させるアンカータグ(リンク)で起動させるまずはアンカータグを使う方法です。hrefでリンク先を指定する方法と、data-remodel-targetで指定する方法、2通りのうちどちらか好きな方を利用してください。data-remodal-target="modal">「data-remodal-target」でポップアップ!</a>なお、ここで指定している「href」及び「data-remodel-target」の値は、ポップアップするウィンドウのdata-remodal-idと同じ文字列にします。JavaScriptで起動させる続いてJavaScriptを使う方法です。シンプルに書く場合は次のようになります。true「data-remodel-target」を指定してモーダルウィンドウを開きます。true「true」を指定すると「confirm」を指定したボタンをクリックした際にウィンドウが閉じるようになります。true上に同じく、「true」を指定すると「cancel」を指定したボタンをクリックした際にウィンドウが閉じるようになります。trueエスケープキー(esc)でウィンドウを閉じます。true「true」を指定するとページ内のどの箇所をクリックしてもウィンドウが閉じるようになります。''モーダルウィンドウの背景要素に任意のクラス名を追加することができます。各イベントごとのコールバック関数。各イベントごとのコールバックも一通りの処理が使えます。指定できる要素が多いので細かいところまでカスタマイズできるのが嬉しいですね。$(this);});なお「jQuery」ではなく「Zepto」との併用も可能です。説明が長くなりましたが、実際に使ってみると意外と簡単に実装することができるので初心者の方にもオススメです。https://github.com/VodkaBears/Remodal/関連本。jQueryについて学ぶなら、コチラの書籍をぜひ!jQuery最高の教科書TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する[particles.js]の使い方。内に書くタグの順番にも気を遣ってみた。文字の太さを調節する。【JavaScript】フォームの進捗をシンプルなプログレスバーで表示するスクリプト[Fort.js]が便利です。