【Rails × jQuery】モーダルウィンドウの実装の仕方について

レビュー（口コミ）機能を実装しましたが、見た目にださかったこともあり
簡易的なモーダル機能を使ってそれっぽくしてみました。参考になれば幸いです。

実装前

「よかった点」と「わるかった点」を書いて投稿し、内容は上にeachを回して一覧を表示するというような実装でした。Ajaxを使って非同期にしています。
gyazo.com

実装後

ボタンを押すとモーダルが立ち上がり、「よかった点」と「わるかった点」を書いて投稿が
できるというものです。Ajaxはすでに実装しているのでモーダルのコードを記述するだけで
結構簡単にできました
gyazo.com

Railsの投稿・削除機能とAjaxを使って非同期（投稿のみ）はできている前提で紹介していきます。

コントローラー

respnd_to doを使って非同期の処理をしています。

class ReviewsController < ApplicationController
  
  def create
    @review = Review.create(review_params)
    respond_to do |format|
      format.html { redirect_to "/matches/#{@review.job_id}.reviews" }
      format.json
    end
  end

end

ビューファイル(実装前）

.Review-wrapper__form
  =form_with model: [match, review], id: "new-comment", local: true do |form|
    .Review-box
      .Review-box__good
        【よかった点】
        = form.text_area :good, maxlength: 250, class: 'Review-box__text', placeholder: 'ここに文章を入力してください'
      .Review-box__bad
        【わるかった点】
        = form.text_area :bad, maxlength: 250, class: 'Review-box__text', placeholder: 'ここに文章を入力してください'
    .Review-button
      = form.submit '投稿する', class: 'Review-button__submit'

ビューファイル（実装後）

最下部にテンプしている記事を参考に次のようにコードを記入しています。モーダルのテンプレートの中にform_withを入れるだけで簡単にできます。
記事だとbootstrapも導入していますが、私の場合自分でcsswo書いていたので今回は
bootstrapの記述は省いて記載しました。

参考にした記事のコード
gyazo.com

%button{"data-target" => "#post", "data-toggle" => "modal", :type => "button"} つぶやきを投稿する　　　
#post.modal.fade{"aria-hidden" => "true", :role => "dialog", :tabindex => "-1"}
  .modal-dialog{:role => "document"}
    .modal-content
-#↓ここに任意のform_withを記入する
      =form_with model: [match, review], id: "new-comment", local: true do |form|
        .Review-wrapper__form
          .Review-post
            .Review-box
              .Review-box__good
                【よかった点】
              = form.text_area :good, maxlength: 250, class: 'Review-box__text', placeholder: 'ここに文章を入力してください'
              .Review-box__bad
                【わるかった点】
              = form.text_area :bad, maxlength: 250, class: 'Review-box__text', placeholder: 'ここに文章を入力してください'
        .Review-button
          = form.submit '投稿する', class: 'Review-button__submit'
-#↓閉じるボタンは記事からそのままコピーする
          %button{"data-dismiss" => "modal", :type => "button", class: 'Review-button__close'} 閉じる

これでモーダルができました！
bootstrapを使用すればもっとよかったとは思いますのでこれから勉強していきます。

参考記事
www.techry.net