Twitter bootstrap modal making other links disabled

问题

I am facing a problem which is hard to explain in words but i will try my best.
Problem: Adding a modal in the header to my rails application makes other links disabled which are situated beside it until the modal is accessed.

Example: |Home| Mail |Settings(Modal Link)| Above example is how my header looks and above mentioned three are links. Until i access Settings modal, Home and Mail links remain disabled. But once i view Modal, i can access Home and Mail again.

When i used Chrome developer tools (Inspect Element), i could see that the Modal is hiding on top of those two Home and Mail links. After accessing Settings(Modal Link), There is no hidden Modal on top of those links and can be accessed.

Any inputs on it ?

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                <%= image_tag 'logos/logo.png'  %>
                <%= image_tag 'logos/tagline.png' %>
            </a>
                <%= render 'shared/search' %>

                 <ul class="nav pull-right">
                    <% if !user_signed_in? %>
                    <li><%= link_to 'Join Us', new_user_registration_path %></li> 
                    <li><%= link_to 'Sign In', new_user_session_path %></li>
                    <li><%= link_to "Facebook", '#'  %></li> <!-- user_omniauth_authorize_path(:facebook)-->
                    <% else %>
                    <li><%=  link_to "Home", root_path %></li>
                     <% if current_user %>
                      <li class="dropdown">
                        <a class="dropdown-toggle notifySymbol" data-toggle="dropdown" href="#">
                           <%= notifyCount %>
                        </a>
                        <div class="dropdown-menu" style="max-height:450px; width:370px; overflow:auto">
                          <%= notify %>
                        </div>
                      </li>
                     <%end%>                        

                    <li class="dropdown">
                          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <%= image_tag "#{@group.group_pic}", :size => '25x25', :class => "img-rounded" %>
                            <%= @group.group_name %>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li> <%= link_to raw('<i class="icon-eye-open"></i> Edit Profile'), edit_profile_path %></li>
                            <li> <%= link_to raw('<i class="icon-edit"></i> Edit Settings'), edit_settings_path %></li>
                            <li> <%= list_groups %> </li>
                            <li class="divider"></li>
                            <li> <%= link_to raw('<i class="fa fa-user"></i> Admin Tasks'), '#', :data => {:toggle => 'modal', :target => '#myAdminModal'} %> </li>
                        </ul>
                      <% end %>
                </ul> 
        </div>
    </div>
</div>

<div class="modal fade" id="myAdminModal" tabindex="-1"  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"> <i class="fa fa-tasks"> Admin Tasks</i> </h4>
      </div>
      <div class="modal-body">
        <div class="tree" >
            <ul>
                <li>
                    <span class="badge badge-success"> <i class="fa fa-smile-o"> Send </i></span>
                    <ul>
                        <li>
                            <%= link_to "All Group", send_all_groups_path %>
                        </li>
                        <li>
                            <%= link_to "Selected Members", '#' %>
                        </li>    
                    </ul>
                </li>
                <li>
                    <span class="badge badge-success"><i class="fa fa-envelope-square"> Send Messages</i> </span>
                    <ul>
                        <li>
                            <%= link_to "All Group", '#' %>
                        </li>
                        <li>
                            <%= link_to "Selected Members", '#' %>
                        </li> 
                 </ul>
                </li>
                <li>
                    <span class="badge badge-warning"><i class="fa fa-paper-plane"> Send Group Invites </i> </span>
                    <ul>
                        <li>
                            <%= link_to "To Member", '#' %>
                        </li>
                        <li>
                            <%= link_to "To Non-Member", '#' %>
                        </li>
                        <li>
                            <%= link_to "Check Invite Status", '#' %>
                        </li>  
                  </ul>
        </div>
      </div>
    <div class="modal-footer" data-dismiss="modal" aria-hidden="true">
        <p class = "btn btn-info" > Close </p>
      </div>

    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/24768690/twitter-bootstrap-modal-making-other-links-disabled