Question

我显示个人资料列表，需要通过模式显示每个用户的更多详细信息：

<%= link_to profile.full_name, { :action => :profile_modal, 
                                :profile_id_param => profile.id }, 
                              {remote: true, 'data-toggle' => 'modal', 
                                'data-target' => '#modal-window'} %>

这是模态的容器fiv：

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="tue">
</div>

控制器操作：

  def profile_modal
    @profile = Profile.find_by_id(params[:profile_id_param])

    respond_to do |format|
      format.js  
      # format.html
    end 
  end

和profile_modal.js.erb：

$("#modal-window").html("<%= escape_javascript(render partial: 'shared/profile_modal', locals: { profile: @profile }) %>");

$("#profile_modal").modal();

模态：

<div class="modal fade" id="profile_modal" tabindex="-1" role="dialog" aria-labelledby="msgModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"> 
          <% if @profile %> <%= @profile.id %> <% end %>

上面的代码根据params[:profile_id_param]值传递变量，但有两个问题：

打开模态并关闭后，背景不会再次淡入。它仍然更暗，只是模态本身消失;
出于某种原因，我无法将当地人传递给模态。如你所见，我在其中使用了实例变量，因为它使用undefined错误。

这里有什么问题？

更新：

在点击时关闭像这样的turbolink：

<%= link_to profile.full_name, { :action => :profile_modal, 
                                  :profile_id_param => profile.id }, 
                                {remote: true,  'data-turbolinks' => false, 'data-toggle' => 'modal', 
                                    'data-target' => '#modal-window'} %>

但没有帮助

Answer 1

解决这个问题的一种方法：

$('#modal-window').on('hide.bs.modal', function () {
  $('#modal-window').css("display", "none");
})

$('#modal-window').on('show.bs.modal', function () {
  $('#modal-window').css("display", "block");
})

$("#modal-window").html("<%= escape_javascript(render partial: 'shared/profile_modal', locals: { profile: @profile }) %>");

$("#profile_modal").modal();

并停用backdrop：

<%= link_to profile.full_name, { :action => :profile_modal, 
                                 :profile_id_param => profile.id }, 
                               { remote: true, 'data-toggle' => 'modal', 
                                'data-target' => '#modal-window', 
                                'data-backdrop' => "false"} %>

还注意到#modal-window即使在模态关闭后也会得到z-index 1050，但是这样：

$('#modal-window').on('hide.bs.modal', function () {
  $('#modal-window').css("display", "0");

没有修好它。

我保持这个问题的开放性：

a）更好的解决方法

b）如何将当地人传递给这个模态？

RoR - 将param传递给Bootstrap模态。背景并没有淡出

1 个答案: