RoR - 将参数传递给 Bootstrap 模式.背景不会淡出 [英] RoR - pass param to Bootstrap modal. Background doesn't fade out

问题描述

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

<%= link_to profile.full_name, { :action =>:profile_modal,:profile_id_param =>profile.id },{远程:真，'数据切换' =>'模态','数据目标' =>'#modal-window'} %>

这是用于模态的容器 fiv:

控制器动作:

 def profile_modal@profile = Profile.find_by_id(params[:profile_id_param])response_to do |格式|格式.js# 格式.html结尾结尾

和 profile_modal.js.erb:

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

模态:

<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><% if @profile %><%=@profile.id %><%结束%>

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

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

这里有什么问题?

更新:

Treid 在点击时关闭像这样的 turbolinks:

<%= link_to profile.full_name, { :action =>:profile_modal,:profile_id_param =>profile.id },{远程:真，'数据涡轮链接' =>假，'数据切换' =>'模态','数据目标' =>'#modal-window'} %>

但没有帮助

解决方案

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

$('#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 },{ 远程:真，'数据切换' =>'模态','数据目标' =>'#modal-window','数据背景' =>假"}%>

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

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

没有修复它.

我保持这个问题开放:

a) 解决此问题的更好方法

b) 如何将 locals 传递给这个 modal?

I display list of profiles and need to display more details about every user via the modal:

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

Here is the container fiv for modal:

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

Controller action:

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

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

and profile_modal.js.erb:

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

$("#profile_modal").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 %> 

This code above passes the variable according to the params[:profile_id_param] value, but there are two problems:

1. After I open modal and close it, background doesn't fades in again. It remains darker, just modal itself disappears;
2. For some reason I can't pass locals to modal. As you see, I use instance variable in it, because it errors me with undefined.

What is wrong here?

UPDATE:

Treid to turn off turbolinks like this on click:

<%= 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'} %>

But didn't helped

解决方案

One way to go around this:

$('#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();

And disable 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"} %> 

Also noticed that #modal-window gets z-index 1050 even after modal being closed, but this:

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

Didnt fixed it.

I keep this issue open for:

a) a better way to fix this

b) How to pass locals to this modal?

这篇关于RoR - 将参数传递给 Bootstrap 模式.背景不会淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！