解決したいこと

InstagramのようにUserの詳細ページからUserの投稿したものを選択すると、選択した投稿をモーダルウィンドウで詳細が見れるように実装したいです。

#参考にしたURL（やってみたがよくわからなかった）
https://qiita.com/MitsuTurtle/items/3283832f5df2d3fcbeb7[【Rails、JavaScript】モーダルウィンドウに写真詳細画面を表示させる]

#利用環境
macOS BigSur
M1 MacBookAir
Rails 6.0.0
Ruby 2.6.5

ビューファイル

views/users/show.html.erb

erb
1<div class="tab-content">
2    <div id="photo" class="tab-pane active">
3      <div class = "row max-auto">
4        <div class = "card-body">
5          <% @photos.each do |photo| %>
6            <%= link_to photo_path(photo.id), remote: true do %>
7              <%= image_tag photo.image, size: '265x265', position:'relative', class: 'user-show-image'%>
8            <% end %>
9          <% end %>
10        </div>
11      </div>
12    </div>

views/shared/_photo_show.html.erb

erb
1<main class= "container">
2  <div class="row">
3    <div class="col-sm-12 col-md-5 mx-auto">
4      <%= image_tag photos.image, width: '100%' %>
5    </div>
6  </div>
7  <div class = "row">
8    <div class= "col-sm-12 col-md-5 mx-auto">
9    </div>
10  </div>
11</main>

#Javacript
views/photos/show.js.erb

# モーダルを取得
var modal = document.getElementById('modal');
# マスクを取得
var mask = document.getElementById('mask');

# モーダルの中身をshowビューに置き換えます。
# 部分テンプレートのパス、localsの値はアプリにより異なります。
modal.innerHTML = '<%= escape_javascript(render partial: 'shared/photo_show', locals: { photo: @photo}) %>';

# hiddenクラスを消してモーダルとマスクを表示させます。
modal.classList.remove('hidden');
mask.classList.remove('hidden');

# モーダルの外側（マスク）をクリックするとhiddenクラスが書き込まれ、モーダルとマスクが再び非表示となります。
mask.addEventListener('click', () => {
  modal.classList.add('hidden');
  mask.classList.add('hidden');
  });

コントローラー

users_controller

Ruby
1class UsersController < ApplicationController
2  def show
3    @user = User.find(params[:id])
4    @photos = @user.photos.order(id: "DESC")
5    @videos = @user.posts.order(id: "DESC")
6  end
7end

Ruby
1class PhotosController < ApplicationController
2  def show
3    @photo = Photo.find(params[:id])
4    respond_to do |format|
5      format.html
6      format.js
7    end
8  end
9end