はじめに
javaScriptが苦手で仕方ない私が苦しみ紛れにモーダルを作成をした時の記録です。
参考になるかわかりませんが、気休め程度にでもご覧ください
経緯
フリマサイトによくあるトップページにあるカテゴリー検索の機能
（こんなやつ↓↓↓）
これの担当となった私はjavaScriptがどうしても苦手で実装に詰まってしまった時の話です。
何度トライしても思うように実装できなかった私
（何か他にもっと簡単であっと言わせるような方法はないものだろうか？）
と考え、思いついたのがモーダルの作成でした。
作ってみると意外と評判がよかったので投稿いたします。
モーダルとは？
ある場所をクリックしたりすると突然出てくる小さなウィンドウのこと。
今回はカテゴリーから探すという部分をクリックすると一覧が表示されるモーダルを作成します。
作成手順
①モーダルのビューを作成し、cssで非表示にする。
②click時のイベントを設定する。（今回はカテゴリーから探すの部分）
③clickイベントによりモーダルを表示
④同じくclickイベントによりモーダルを隠すアクションを追加する。
大まかにこんな手順で作成します。
完成したモーダル
まず最初に作成したモーダルを載せておきます
最初に作ろうとしたものからかなり妥協してしまいましたが^^;
・トップページのカテゴリーから探すをクリックすると小さなウィンドウが現れる。
・CLOSEの部分をクリックするとウィンドウが消える。
という単純な機能です。
今回深掘りはしませんが、中のカテゴリーをクリックするとそれぞれのカテゴリー別商品一覧へ遷移するようになっています。
モーダルの作成
最初にモーダルのビューを作成します。
.category_modal
#category-index
.index-title
%p.title カテゴリーで検索
.close-modal
%p.close CLOSE
- @parents.each do|parent| ※ancestryでカテゴリーの親・子・孫の関係が出来ていることを前提としています
.category-list
= link_to parent.name, category_path(parent.id) , class: "parent_category", id: "#{parent.id}"
.category-all
= link_to "カテゴリー 一覧", categorys_path
.category_modal {
background-color: rgba(0, 0, 0, .6); 薄く黒がかった背景
bottom: 0;
display: none; ⬅️ここがポイント
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
ここでのポイントはSCSSに記載したdisplay: none;の部分、つまり初期段階では作成したモーダルを非表示にしています。
これを後からjQueryを使って表示させるのです。
②Click時のイベント設定
次にイベントの設定を行います。
jsファイルを作成し（ここではmodal.js),イベントの記述を行います。
$(function() {
$('#category-list').click(function(){
//カテゴリー一覧をクリック
});
});
※ ＃'category-list'の部分がトップページのカテゴリーから探すの部分についているIDとなります。
③Clickイベントによるモーダルの表示
カテゴリーから探すをクリックした時に先ほど作成したモーダルを表示させます。
ここではfadeInメソッドを使用します。
$(function() {
$('#category-list').click(function(){
$('.category_modal').fadeIn(); ⬅️追加
});
});
これで半分完成！！
④CLOSEでモーダルを非表示に戻す。
ここで終えてしまうとモーダルが表示されたままの状態になってしまうので、今度はモーダルを非表示にするための設定をします。
やり方は同じですが、モーダルを非表示にするにはfadeOutメソッドを使用します。
$(function() {
$('#category-list').click(function(){
$('.category_modal').fadeIn();
});
$('.close-modal').click(function(){
//モーダルのCLOSE部分をクリック
$('.category_modal').fadeOut();
});
});
これでモーダルの非表示が完了しました！！
あとは細かい部分のSCSSの設定や各種リンクの作成でなんとか切り抜けました。
最後に
技術的にはjQueryのfadeInとfadeOutの２つのメソッドを使っただけでしたが、これを見た勉強仲間からは『おっ』という反応が返ってきてちょっと学習コスパの良い実装でした。
将来的に触って楽しいサイトを作成してみたいと思っているのでモーダルの作成は少し面白かったです。
今度は本来の目的物である一覧表示の投稿が出来るように精進してまいりますので応援よろしくお願いいたします。
最後までご覧いただきましてありがとうございました！！