【Rails】jQueryプラグインでフルスクリーンのモーダルウィンドウを表示する方法

更新日:

「DIVE INTO CODE」学習記録 #29

こんにちは。

29日目。jQueryのプラグインを使い、モーダルウィンドウ(ポップアップ)を表示させる。

学習内容

【オリジナルアプリ開発「免許学科試験学習アプリ」】

  • jQueryの実装
  • jQueryプラグイン”animatedModal”実装

 

感想

今回から僕がなんとか自力で作れないかと思っている、

「JSで動く一問一答機能」製作を開始しております。

 

イメージはこんな感じ。

※Pagesで作成したイメージです。開発したわけではないです。トップ

スタート押して、問題が出る。

青の部分はモーダルウィンドウで。

問題

解答すると、

またポップアップで答えと解説を表示。

後ろは暗い透明色で。

ここで「次の問題へ」ボタンが出てくる。

解答時

 

最後全部解き終えると、結果表示。

ここでDBに正誤情報を送信する。

結果画面
いかにも一問一答って感じを作りたいんですけど。

正直何して良いかわからない。

 

とりあえずポップアップをフルスクリーン表示させたいわけで、

そこからスタート。

 

色々検索してみる。

 

個人でJSコーディングしてオリジナルモーダルウィンドウ作っている人もいれば、

jQueryのプラグインで実装できるみたいだとか。

 

試しに、”animatedModal”というjQueryのプラグインを使ってみることに。

 

animatedModal.js

 

上のリンク内にあるDEMOSボタンを押すとアニメーション付きのポップアップがみれます。

 

記事にしているブログがいくつかあったものの、

railsで実装している人のブログが見当たらないので、

ここでまとめてみます。

 

RailsでjQueryプラグイン”animatedModal”の利用方法

1、まずはダウンロード

animatedModal.js

ここからまずサイトに入り、パッケージをダウンロード。

ダウンロードの場所

 

中身はこのような感じ。

ファイル中身

 

 

2、 RailsにjQueryを読み込ませる

すでにインストール済みであればこの作業は不要です。

ここは今回省略します。

 

Railsドキュメント jQuery

Railsドキュメント一応載せておきます。

※2019/09/12リンク切れ

 

3、Railsにプラグインを読み込ませる

多分色々やり方あるんだと思うんですが、

今回は直接アプリのディレクトリに入れたら動きました。

 

まず、「app/assets/javascripts」に、

先ほどダウンロードした中にある「animatedModal.js」ファイルを入れ込む。

ファイル入れ込み1

同じように、

「app/assets/animate.min.css」に、「animate.min.css」

を入れ込む。

ファイル入れ込み2

4、ビューに書き込む

表示させたいviewに書き込みを行います。

 

idの「demo01」がjQueryプラグイン(animatedModal)に対応してます。

 

モーダルを開くためのアンカー

ここに、必ず「id」を紐付けする必要があります。

 

5、実際の画面

色々いじって今こんな感じです。

モーダル

 

この背景が緑色のモーダルが、animateModalで実装したものです。

その後色々調べモーダルの後にモーダルさらに入れてみたんですが、

うまく起動するときとしないときがあり、原因がわかりません。

 

ただコピペしたJSを解読中です。

 

難しいです。

慣れていくしかないのかとは思うんですが、

とにかく時間かかります。

 

今日明日とかで一人での実装に限界を感じたらDICメンターに相談することにします。

できれば一人でやってみたかったんですけど。

 

以上ありがとうございました。

-プログラミング学習
-, , ,

Copyright© s u p ? , 2019 All Rights Reserved.