Question

使用Rails 4.2.6，Bootstrap-saas 3.2.0 我有一组产品，我在索引视图中这样渲染。使用bootstrap网格系统

.row
  =render partial: 'product', collection: @products

产品部分

   .col-sm-6.col-md-4
    .thumbnail
    %h2 My Box
    %ul
      %li=product.name
      %li=product.brand
      %li=product.model
      %li="$#{product_price(product.price)}"
      =link_to 'more info', '#dialog', 'data-toggle' => 'modal'

我想为每个呈现的产品显示一个模态，其中product.description，product.name显示在模态中。我遇到的问题是，模式只加载第一个产品信息。它应该显示每种产品的产品信息。我的模态html标记

    #dialog.modal.fade{'aria-hidden' => 'true', 'aria-labelledby' =>         'myModalLabel', 'data-backdrop' => 'static', 'data-keyboard' => 'true', :role => 'dialog', :tabindex => '-1'}
  .modal-dialog
    .modal-content
      .modal-header
        %button.close{'aria-label' => 'Close', 'data-dismiss' => 'modal', :type => 'button'}
          %span{'aria-hidden' => 'true'} &times;
        %h3.modal-title=product.name
      .modal-body
        %h2=product.desc
      .modal-footer
        =button_tag 'close', 'data-dismiss' => 'modal'

Answer 1

您正在使用带有id选择器的模式的CSS '#dialog'。您的CSS id在您的网页上必须是唯一的。

因此，您必须为模式框添加唯一标识符。例如，将product.id添加到其id：

=link_to 'more info', "#dialog-#{product.id}", 'data-toggle' => 'modal'

并在你的模态部分：

.modal.fade{id="dialog-#{product.id}", 'aria-hidden' => 'true', 'aria-labelledby' => 'myModalLabel', 'data-backdrop' => 'static', 'data-keyboard' => 'true', :role => 'dialog', :tabindex => '-1'}
  .modal-dialog
    .modal-content
      -# etc.

rails bootstrap modal partial

1 个答案: