Gmaps4rails : Using Bootstrap modal with gmaps4rails infowindows - ruby-on-rails

Question

I have managed to apply gmaps4rails in my application
FIRST METHOD
I have a map action like this:
def map
#family = Family.all.to_gmaps4rails do |family,marker|
marker.infowindow render_to_string(:partial => "/layouts/info", :locals => { :family => family})
end
end
in my _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>
The bootstrap's modal is rendered fine but with a glitch. It looks like this:
The modal is supposed to be on top of the grey color layer.
I guess this is happening beacause I'm rendering the modal in the infowindow partial. That is why it's css properties are that of the infowindow. How do I make it work as normal modal.
I can remove the background-color which we get once the modal is activated by adding:
.modal-backdrop {background: none;}
to my css file.
But the **modal is not clickable. I cannot click on the links in it and so on.How to fix this?
ALTERNATE METHOD I TRIED
map action
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>
Now the modal renders properly but it only has the last family in #fam variable.
How can I pass the family id as parameter from the modal's link?

Answer 1

Finally I did it with the first method.
Altered few css properties of modal
.modal-backdrop {background: none;z-index:-1;}
and
#myModal {z-index:1;}
Now all the elements in the modal are clickable like a normal bootstrap-modal.