Modal content displays fine when triggered by a clicking button via Ajax. However, instead of the modal popping up and making the entire page behind it grey and inactive the modal content appears within the HTML content and pushes the other contents down. I had run a similar modal on a different framework (Shiny) other than rails and it worked fine. I came across a similar question: Twitter Bootstrap modal pushes html content to the left. The working solution was do this in CSS: html{overflow:hidden;height:100%;} and
body{overflow:auto;
height:100%;}
which I tried but did not work. Other similar posts conclude that issues are due to bugs in Bootstrap and suggest to modify bootstraps source code but I suppose they were fixed since the posts date like more than 2 years ago.
My code: /app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require_tree .
app/views/indicators/index.html.erb
<%= link_to 'Add release', new_release_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
/app/controllers/indicators_controller.rb
def new_release
respond_to do |format|
format.html
format.js
end
end
app/views/indicators/new_release.js.erb
$("#modal-window").html("<%= escape_javascript(render 'indicators/indicator_modal') %>");
$("#modal-window").modal('show');
/app/views/indicators/_indicator_modal.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
Could it be a Rails specific issue? How can I make the modal pop-up?
