如何在rails中使用引导模式制作弹出页面

Question

我有一个简单的 Rails 应用程序，用户可以在其中添加产品，当用户单击 f.submit 按钮时，它会将他们带到 show.html.erb 但我现在要做的是制作show.html.erb一个弹出窗口，作为 Rails 的新手，我不知道如何完成此操作。

我尝试的是引导模式

我的 show.html.erb

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

<p>
  <strong>Delivery:</strong>
  <%= @load.delivery %>
</p>

<p>
  <strong>Date:</strong>
  <%= @load.date %>
</p>

<p>
  <strong>Truck:</strong>
  <%= @load.truck %>
</p>

<p>
  <strong>Phone:</strong>
  <%= @load.phone %>
</p>

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

我的路线.rb

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 => {:registrations => "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 -> 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" => "mailbox#inbox", as: :mailbox_inbox
  get "mailbox/sent" => "mailbox#sent", as: :mailbox_sent
  get "mailbox/trash" => "mailbox#trash", as: :mailbox_trash

  # conversations
  resources :conversations do
    member do
      post :reply
      post :trash
      post :untrash
    end
  end
end

我的控制器

class LoadsController < 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

_form.html.erb

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

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

          </div>
      <% end %>

Answer 1

当用户单击 f.submit 按钮时，您应该能够将他们重定向到您想要的任何视图（在您的情况下为 show.html.erb）。实现弹出式显示（不使用库等）的一种方法是设置特定 show.html.erb 页面的样式，以便它给人一种弹出式的错觉。使实际的页面内容更小（给出一个弹出窗口的外观并相应地设置它的样式），然后将主体的背景设置为不透明度

Answer 2

在您的 show.html.erb 中，添加一些 javascript 以在页面加载时显示模式：

<script type="text/javascript">
    $(window).load(function(){
        $('#load-<%= load.id %>-notes').modal('show');
    });
</script>

希望您的页面上有更多内容，因为用户可以关闭模​​式，他们仍然会出现在您的展示页面上。