Question

我有一个简单的rails应用程序，用户可以在其中添加产品，当用户点击f.submit按钮时，它会将它们带到show.html.erb，但我现在要做的是制作{{1一个弹出窗口，就像我对rails的新手一样，我对如何实现这个目标一无所知。

我尝试的是bootstrap模态

我的show.html.erb

show.html.erb

my routes.rb

<!-- 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 %>

我的控制器

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

_form.html.erb

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

Answer 1

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

Answer 2

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

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

希望您在页面上有更多内容，因为用户可以关闭模式并且它们仍会显示在您的显示页面上。

如何在rails中使用bootstrap模式创建一个弹出页面

2 个答案: