Gmaps4rails：使用引導模式與gmaps4rails信息窗口

Question

我設法在我的應用程序應用gmaps4rails

第一種方法

我有一個map動作是這樣的：

def map 
    @family = Family.all.to_gmaps4rails do |family,marker| 
    marker.infowindow render_to_string(:partial => "/layouts/info", :locals => { :family => family}) 
    end 
end 

在我的_info.html.erb：

<h5><%=family.location%></h5> 

<%=link_to "View Details","#myModal",class: "btn btn-success",data: {toggle: "modal"} %> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel" style="color:#9D5641;margin-top:10px;">Family Details</h3> 
     <h5>Family ID : <%=family.famid%></h5> 
    </div> 
    <div class="modal-body"> 
     <%= family.persons.count %> 
     <table class="table table-hover"> 
      <tr> 
       <th>Name</th> 
       <th>Mobile No.</th> 
       <th>Photo</th> 
      </tr> 
      <% family.persons.each do |person| %> 
       <tr> 
        <td><%=person.name%></td> 
        <td><%=person.mobnum%></td> 
        <td><%=person.photo%></td> 
       </tr> 
      <%end%> 
     </table> 
    </div> 
    <div class="modal-footer"> 
     <h5><%=link_to "Veiw Full Details", {controller: :managedb ,action: :details, famid: family.famid} %></h5> 
    </div> 
</div> 

bootstrap的模態渲染正常，但有小故障。它看起來像這樣：

的模式應該是在grey色層的頂部。

我想這是發生的因爲我在infowindow部分呈現modal。這就是爲什麼它的css屬性是infowindow。我如何使其正常工作modal。

我可以刪除它，我們得到一次模態的background-color被激活，通過添加：

.modal-背景{背景：無;}

到我的CSS文件。

但**模式不是clickable。我無法點擊它中的鏈接等等。如何解決這個問題？

另一種方法我試過

地圖行動

def map 
     @family = Family.all.to_gmaps4rails do |family,marker| 
      @fam=family 
      marker.infowindow render_to_string(:partial => "/layouts/map", :locals => { :family => family}) 
     end 
    end 

_info.html.erb

<h5><%=family.location%></h5> 

<%=link_to "View Details","#myModal",class: "btn btn-success",data: {toggle: "modal"} %> 

map.html.erb

<div class="container"> 
<div class="row"> 
    <%= gmaps4rails(@family) %> 
    <!-- Modal --> 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel" style="color:#9D5641;margin-top:10px;">Family Details</h3> 
      <h5>Family ID : <%=@fam.famid%></h5> 
     </div> 
     <div class="modal-body"> 
      <table class="table table-hover"> 
       <tr> 
        <th>Name</th> 
        <th>Mobile No.</th> 
        <th>Photo</th> 
       </tr> 
       <% @fam.persons.each do |person| %> 
        <tr> 
         <td><%=person.name%></td> 
         <td><%=person.mobnum%></td> 
         <td><%=person.photo%></td> 
        </tr> 
       <%end%> 
      </table> 
     </div> 
     <div class="modal-footer"> 
      <h5><%=link_to "Veiw Full Details", {controller: :managedb ,action: :details, famid: @fam.famid} %></h5> 
     </div> 
    </div> 
</div> 

現在的modal正確呈現，但它只有在@fam變量最後family。

如何通過family id作爲參數從模態的鏈接？

Answer 1

最後我用第一種方法做了。的modal

.modal-backdrop {background: none;z-index:-1;} 

和

#myModal {z-index:1;} 

修改過的幾個CSS屬性現在，在模式的所有要素可點擊的像一個正常的自舉模式。