Gmaps4rails：将Bootstrap模态与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>  

引导程序的模态很好，但有毛刺。 看起来像这样：

模态应该在grey层的顶部 。

我想这是因为我在infowindow一部分中渲染了modal 。 这就是为什么它的CSS属性的的infowindow 。 我如何使其像普通modal一样工作。

我可以删除模态激活后得到的background-color ，方法是添加：

.modal-backdrop {background：none;}

到我的css文件。

但是** modal不可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少数CSS属性

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

和

#myModal {z-index:1;}  

现在，模态中的所有元素都可以单击，就像普通的引导模态一样。