Rails page loads modal-backdrop twice?

Question

When I close the modal (click outside the modal), the webpage is still dark, and I have to click a second time somewhere on the page for it to be normal again. Anyone knows what the problem might be?

_post_modal.html.erb

<div id="<%= p.id %>" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <p><h3 id="myModalLabel"><%= p.title %></h3></p>
    </div>
    <div class="modal-body">
        <%= raw(p.link) %>
    </div>
</div>

_single_post.html.erb

<% @posts.each do |p| %>
   <%= render "post_modal" %> 
<% end %>

list.html.erb

<div class="container">
   <%= render 'single_post' %>
</div>

application.html.erb

<body>
    <%= link_to('Logout user', destroy_user_session_path, :method => :delete) %>
    <%= link_to('Logout admin', destroy_admin_session_path, :method => :delete) %>
    <%= yield %>
</body>

custom.css.scss

body{
      background-image:url('dark_leather.png');
      color: #333;
      font-family: verdana, arial, helvetica, sans-serif;
      line-height: 18px;
}

.container{
    vertical-align: center;
}

.modal{
    h3{
        font-family: 'Josefin Slab', serif;
        font-size: 18pt;
        font-weight: 400;
        color: #34DDDD;
    }
}

So I found out (from the "Inspect Element" in Chrome), that the page opens up two `
`, instead of just one. This is the reason I have to click twice to make the dark overlay disapear. So how can I make it just open once (instead of two)? — allegutta, May 27 '13 at 09:55

score 3 · Answer 1 · answered May 25 '13 at 18:38

3

Hide the modal before doing the ajax request. I had the same problem and that solved it. With me it was more of an issue of replacing the container that contained the actual modal window.

If that doesn't work you can always force it to go away by doing the following:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

answered May 25 '13 at 18:38

Kevin Lynch

24,427
3
36
37

Hi Vector, thanks for your answer, but what do you mean with "Hide the modal before doing the ajax request"? How can I do this? – allegutta May 26 '13 at 11:06
Vector, you just copied this answer...(http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear) – allegutta May 27 '13 at 09:56

score 0 · Accepted Answer · edited May 23 '17 at 11:58

After hours of googleing and reading, I found a solution.

I first found this, that lead me to this, that lead me to this. (Useful because it gives alternative solutions and explanations).

In short:

1) First I added this: config.serve_static_assets = false to my config/environments/development.rb file.

2) Then I ran the rake assets:clean command in terminal.

3) And finally i deleted the cache in my browser.

It worked - and why it worked, is a long explanation written in the links above ;)

Rails page loads modal-backdrop twice?

2 Answers2