Gmaps4rails :使用Bootstrap模式与gmaps4rails infowindow

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，一旦激活了模态，就可以添加以下内容：

模式-背景{背景:无；}

我的css文件。

但**模式不是clickable。我不能点击其中的链接，所以on.How可以修复这个问题吗？

替代方法--我尝试过

地图动作

    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;}  

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