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>

引导程序的模态渲染得很好，但有一个小故障。它看起来像这样：

enter image description here

该模式应位于grey颜色层之上。

我猜这种情况正在发生 beacause 我正在modal部分呈现infowindow。这就是为什么它的css属性是infowindow的属性。如何使其正常工作modal。

我可以通过添加：

删除模式激活后获得的background-color

.modal-backdrop {background：none;}

到我的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正确呈现，但它只有family变量中的最后一个@fam。

如何从模态链接传递family id参数？

Answer 1

最后我用第一种方法做到了改变了modal

的几个css属性

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

和

#myModal {z-index:1;}

现在，模态中的所有元素都可以像普通的bootstrap-modal一样点击。

Gmaps4rails：使用Bootstrap模式和gmaps4rails infowindows

1 个答案: