Twitter Bootstrap Question posted in

Bootstrap modal does not popup but pushes html content – Twitter bootstrap

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?

Tags:

2

Answers


  1. 0

    It looks like you’re missing some markup that the modal requires (see the Bootstrap docs)

    You have:

    <div class="modal hide fade" ... >
  <div class="modal-header" ... >
  <div class="modal-body" ... >
  <div class="modal-footer" ... >

    But you need:

    <div class="modal hide fade" ... >
  <div class="modal-dialog" ... >
    <div class="modal-content" ... >
      <div class="modal-header" ... >
      <div class="modal-body" ... >
      <div class="modal-footer" ... >
    Login or Signup to reply.
  2. 0

    If your using bootstrap gem try to add following line to /app/assets/javascripts/application.js

    here are the https://github.com/twbs/bootstrap-sass

    //= require bootstrap-sprockets

    or else if manually using boostrap by using source code try to add below file to javascript directory in your application

    bootstrap/js/modal.js
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search