CODEWITHSUNDEEP
javascriptcssruby-on-rails-3twitter-bootstrapmodal-dialog
allegutta
allegutta

Reputation: 5644

Rails page loads modal-backdrop twice?

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;
    }
}

Upvotes: 1

Views: 2411

Answers (2)

allegutta
allegutta

Reputation: 5644

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 ;)

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

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();

Upvotes: 2

Related Questions