【Rails】モーダルウィンドウを1から理解して実装する

更新日:

【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #30

こんにちは。

30日目。モーダルウィンドウについて仕組みを理解する。jQueryプラグインは使わないで実装。

学習内容

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

  • jQuery基礎確認
  • モーダルウィンドウの不具合修正

 

感想

今回もモーダルウィンドウについて学習しました。

前回jQueryのプラグインを利用してモーダルを実装したんですが、

【Rails】jQueryプラグインでフルスクリーンのモーダルウィンドウを表示【DIVE INTO CODE】

 

結局プラグインだとコーディングの理解が難しく、

一旦やり直すことに。

 

個人ブログで乗っていたコードを参考に1からモーダルウィンドウ実装の流れについて、

理解しようと思います。

 

参考にした記事
[ プログラミング ] jQueryでモーダルウィンドウを作る方法

 

ここに書いてあったコードを解読する。

 

とにかく<script>タグ内のJSの理解が必要。

 

以下の部分が、「modal-open」クラスを当てた部分のクリック時の設定になる。

「modal-open」クラスを当てた要素をクリックするとモーダルが開く。

 

まず最初から。

「append」メソッドは要素を追加できるメソッド。

これにより「'<div class="modal-overlay"></div>'」という、

「modal-overlay」クラスを持ったdivを生成する。

 

この「modal-overlay」が、モーダルウィンドウの後ろの黒い背景にあたる。

modal-overlay

 

$('.modal-overlay').fadeIn('slow');

により、クリック時に「modal-overlay」がfadeInアクションにより表示される。

「fadeIn」アクションは「要素の表示」に係るアクション。

jQueryでは他にも「show」や「toggle」などが、

要素表示アクションとして用意されている。

 

次、

 

「modal」という変数を定義している。

これがモーダルのコンテンツ部分に該当する。

コンテンツ部分

 

(this)は「.modal-open」を指す。

ここで、「modal-open」クラスを当てている要素を確認する。

これらである。

これらの要素には「data-target="con1"」 のように、

全て「data-target」が設定されている。

 

この「data-target」引っ張ってきて、「modal」変数に格納している。

 

「attr」メソッドは、属性に値を設定する、または設定されている値を取得するメソッド。

頭のシャープで「id」としている。

 

「modalResize()」はモーダルの表示位置を設定するためのもの。

$(modal).fadeIn('slow');

でオーバーレイ部分と同様に表示をさせる。

「slow」表示スピードの設定。

 

次が非表示部分の設定。

「modal-overlay」もしくは「modal-close」クラスを付与した要素を

クリックした際にモーダルを非表示にする設定。

 

「window」表示画面を表す。「document」や「this」と同様に、

セレクタと同じ要領で使用が可能。

先ほど定義した「modalResize()」を、

表示画面の大きさに合わせてリサイズしている。

 

最後の部分。

ここで「modalResize()」のサイズ調整を行なっている。

また、「modal」が中心に来るように設定している。
とりあえず一通りなんとなくではあるが理解。

同じ関数をもう一個設定し、同じように「id」と「data-target」に注意してコーディングすれば、モーダルを二重にできそうだ。

 

表示成功。今回はモーダルが出たり出なかったりする不具合は生じてない。

表示アニメーションが「fadeIn」だと少し雰囲気にあっていない。

 

アニメーションはcssを上手いことやると付けれるらしいが、

そんなことを先にやってまた不具合でたら嫌なので、

後回しにしようと思う。

試作

 

一人での開発に限界を感じたので、

明日はメンターに相談します。

 

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

保存保存

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

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