Twitter引导模式禁用其他链接

时间:2014-07-15 21:40:58

标签: html css ruby-on-rails twitter-bootstrap modal-dialog

我面临一个难以用语言解释的问题,但我会尽力而为 问题:在我的rails应用程序的标题中添加modal会禁用其他链接,这些链接位于其旁边,直到访问modal

示例:|Home| Mail |Settings(Modal Link)| 以上示例是我的标题看起来如何,上面提到的三个是链接。 在我访问Settings模式之前,HomeMail链接仍处于禁用状态。但是,一旦我查看Modal,我就可以再次访问HomeMail

当我使用Chrome开发者工具(Inspect Element)时,我可以看到Modal隐藏在这两个Home and Mail链接之上。访问Settings(Modal Link)后,这些链接上没有隐藏的Modal,可以访问。

有什么输入吗?

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

0 个答案:

没有答案