如何在rails中使用bootstrap模式創建彈出頁面

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

我的routes.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頁面進行樣式設置，以便給出彈出式的幻覺。使實際頁面內容更小（給出彈出窗口的外觀並相應地設置樣式），然後將body的背景設置爲不透明度< 1.

Answer 2

在您的show.html.erb中，添加一些JavaScript顯示在頁面載入模式：

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

希望，你必須在頁面上更多的東西，因爲用戶可以關閉模​​式，他們會成爲你的節目頁面上依然。