how to make a popup page using bootstrap modal in rails
<p>I have a simple rails app where a user can add a product and as the user clicks on the f.submit button it takes them to show.html.erb but what I want to do now is to make the <code>show.html.erb</code> a popup, as am new to rails I don't have any idea on how to accomplish this.</p>

<p>What I tried is bootstrap modal</p>

<p><strong>my show.html.erb</strong></p>

<pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="load-&lt;%= load.id %&gt;-notes" tabindex="-1" role="dialog" aria-labelledby="load-&lt;%= load.id %&gt;-label" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title" id="load-&lt;%= load.id %&gt;-label"&gt;Notes&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;
  &lt;strong&gt;Pickup:&lt;/strong&gt;
  &lt;%= @load.pickup %&gt;
&lt;/p&gt;

&lt;p&gt;
  &lt;strong&gt;Delivery:&lt;/strong&gt;
  &lt;%= @load.delivery %&gt;
&lt;/p&gt;

&lt;p&gt;
  &lt;strong&gt;Date:&lt;/strong&gt;
  &lt;%= @load.date %&gt;
&lt;/p&gt;

&lt;p&gt;
  &lt;strong&gt;Truck:&lt;/strong&gt;
  &lt;%= @load.truck %&gt;
&lt;/p&gt;

&lt;p&gt;
  &lt;strong&gt;Phone:&lt;/strong&gt;
  &lt;%= @load.phone %&gt;
&lt;/p&gt;

&lt;strong&gt;&lt;font style="text-transform: capitalize;"&gt;&lt;%= @load.user.full_name %&gt;&lt;/strong&gt;&lt;/font&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;% end %&gt;
</code></pre>

<p><strong>my routes.rb</strong></p>

<pre><code>Rails.application.routes.draw do

  resources :loads
  resources :reviews
  get 'activities/index'
  get 'profiles/show'
  get 'pages/about'
  get 'pages/contact'
  get 'pages/urgentshipment'
  get 'pages/howitworks'
  get 'pages/review'
  get 'pages/sitemap'
  get 'comments/notification_update'


  devise_for :users, :controllers =&gt; {:registrations =&gt; "registrations"}
  resources :shipments do
    member do
      get "like", to: "shipments#upvote"
    end
    resources :comments 
  end
  # The priority is based upon order of creation: first created -&gt; highest priority.
  # See how all your routes lay out with "rake routes".
  authenticated :user do
    root 'shipments#index', as: "authenticated_root"
  end
  root "pages#homepage"
  get '/:id', to: 'profiles#show'
  # mailbox folder routes
  get "mailbox/inbox" =&gt; "mailbox#inbox", as: :mailbox_inbox
  get "mailbox/sent" =&gt; "mailbox#sent", as: :mailbox_sent
  get "mailbox/trash" =&gt; "mailbox#trash", as: :mailbox_trash

  # conversations
  resources :conversations do
    member do
      post :reply
      post :trash
      post :untrash
    end
  end
end
</code></pre>

<p><strong>my controller</strong></p>

<pre><code>class LoadsController &lt; ApplicationController
  before_action :set_load, only: [:show, :edit, :update, :destroy]

  # GET /loads
  # GET /loads.json
  def index
    @loads = Load.all
  end

  # GET /loads/1
  # GET /loads/1.json
  def show
    @load = Load.find(params[:id])
  end

  # GET /loads/new
  def new
    @load = Load.new
  end

  # GET /loads/1/edit
  def edit
  end

  # POST /loads
  # POST /loads.json
  def create
    @load = current_user.loads.new(load_params)

    respond_to do |format|
      if @load.save
        format.html { redirect_to @load, notice: 'Shipment was successfully created.' }
        format.json { render :show, status: :created, location: @load }
      else
        format.html { render :new }
        format.json { render json: @load.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /loads/1
  # PATCH/PUT /loads/1.json
  def update
    respond_to do |format|
      if @load.update(load_params)
        format.html { redirect_to @load, notice: 'Load was successfully updated.' }
        format.json { render :show, status: :ok, location: @load }
      else
        format.html { render :edit }
        format.json { render json: @load.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /loads/1
  # DELETE /loads/1.json
  def destroy
    @load.destroy
    respond_to do |format|
      format.html { redirect_to loads_url, notice: 'Load was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_load
      @load = Load.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def load_params
      params.require(:load).permit(:pickup, :delivery, :date, :truck, :phone, :user_id)
    end
end
</code></pre>

<p><strong>_form.html.erb</strong></p>

<pre><code>&lt;div class="row vertical-offset-100"&gt;
      &lt;div class="col-md-4 col-md-offset-4"&gt;
&lt;div class="row"&gt;
  &lt;div class="span4"&gt;
    &lt;%= simple_form_for @load, html: {class: "well", multipart: true } do |f| %&gt;

    &lt;fieldset&gt;
      &lt;h1 class="text-center login-title"&gt;&lt;strong&gt; Hey &lt;%= current_user.first_name %&gt;&lt;/strong&gt; &lt;/h1&gt; 
      &lt;h3 class="text-center login-title"&gt;&lt;strong&gt; Let's fill the Shipment Details &lt;/strong&gt; &lt;/h3&gt;
      &lt;%= f.input :pickup, placeholder: "Where Do You Want The Shipper To Arrive?", label: "Pickup Location" %&gt;
      &lt;%= f.input :delivery, placeholder: "Where Do You Want To Move The Shipment?", label: "Delivery Location" %&gt;
      &lt;%= f.input :date, placeholder: "When Do You Want To Ship?", label: "Date Of Shipment" %&gt;
      &lt;%= f.input :truck, :collection =&gt; ["Mini(Tempo)", "Tata Ace(Chota Hathi", "Max(MaxiTruck)","Max+(Tata 407"], placeholder: "Choose Your Vehicle", label: "Trucks", :prompt =&gt; 'Select Your Vehicle' %&gt;
      &lt;%= f.input :phone, placeholder: "Your Mobile Number", label: "Contact Number" %&gt;
    &lt;div class="text-center"&gt;
&lt;%= link_to 'Add release', load_id:  {:remote =&gt; true, 'data-toggle' =&gt;  "modal", 'data-target' =&gt; '#modal-window'}  %&gt;
  &lt;/button&gt;

          &lt;/div&gt;
      &lt;% end %&gt;
</code></pre>