「DIVE INTO CODE」学習記録 #29
こんにちは。
29日目。jQueryのプラグインを使い、モーダルウィンドウ（ポップアップ）を表示させる。
学習内容
【オリジナルアプリ開発「免許学科試験学習アプリ」】
- jQueryの実装
- jQueryプラグイン”animatedModal”実装
感想
今回から僕がなんとか自力で作れないかと思っている、
「JSで動く一問一答機能」製作を開始しております。
イメージはこんな感じ。
※Pagesで作成したイメージです。開発したわけではないです。
スタート押して、問題が出る。
青の部分はモーダルウィンドウで。
解答すると、
またポップアップで答えと解説を表示。
後ろは暗い透明色で。
ここで「次の問題へ」ボタンが出てくる。
最後全部解き終えると、結果表示。
ここでDBに正誤情報を送信する。
いかにも一問一答って感じを作りたいんですけど。
正直何して良いかわからない。
とりあえずポップアップをフルスクリーン表示させたいわけで、
そこからスタート。
色々検索してみる。
個人でJSコーディングしてオリジナルモーダルウィンドウ作っている人もいれば、
jQueryのプラグインで実装できるみたいだとか。
試しに、”animatedModal”というjQueryのプラグインを使ってみることに。
上のリンク内にあるDEMOSボタンを押すとアニメーション付きのポップアップがみれます。
記事にしているブログがいくつかあったものの、
railsで実装している人のブログが見当たらないので、
ここでまとめてみます。
RailsでjQueryプラグイン”animatedModal”の利用方法
１、まずはダウンロード
ここからまずサイトに入り、パッケージをダウンロード。
中身はこのような感じ。
２、 RailsにjQueryを読み込ませる
すでにインストール済みであればこの作業は不要です。
ここは今回省略します。
Railsドキュメント一応載せておきます。
３、Railsにプラグインを読み込ませる
多分色々やり方あるんだと思うんですが、
今回は直接アプリのディレクトリに入れたら動きました。
まず、「app/assets/javascripts」に、
先ほどダウンロードした中にある「animatedModal.js」ファイルを入れ込む。
同じように、
「app/assets/animate.min.css」に、「animate.min.css」
を入れ込む。
４、ビューに書き込む
表示させたいviewに書き込みを行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <a id="demo01" href="#animatedModal">ここを押せばモーダルが開く</a> <div id="animatedModal"> <div class="close-animatedModal"> ここを押せばモーダルが閉じる </div> <div class="modal-content"> ここに書いたものがモーダルの中身になる。 </div> </div> <script> $("#demo01").animatedModal(); </script> </body> |
idの「demo01」がjQueryプラグイン（animatedModal）に対応してます。
|
1 2 3 |
<script> $("#demo01").animatedModal(); </script> |
モーダルを開くためのアンカー
|
1 |
<a id="demo01" href="#animatedModal">ここを押せばモーダルが開く</a> |
ここに、必ず「id」を紐付けする必要があります。
５、実際の画面
色々いじって今こんな感じです。
この背景が緑色のモーダルが、animateModalで実装したものです。
その後色々調べモーダルの後にモーダルさらに入れてみたんですが、
うまく起動するときとしないときがあり、原因がわかりません。
ただコピペしたJSを解読中です。
難しいです。
慣れていくしかないのかとは思うんですが、
とにかく時間かかります。
今日明日とかで一人での実装に限界を感じたらDICメンターに相談することにします。
できれば一人でやってみたかったんですけど。
以上ありがとうございました。