【问题标题】:Nav bar with modal带模态的导航栏
【发布时间】:2016-02-13 11:33:46
【问题描述】:

我正在使用引导程序。
我想将模式与导航栏一起使用。

当我单击导航栏时,模式已打开。
但是导航栏没有被禁用。
导航栏仍然位于顶部并且可以正常工作。

我希望在打开模式时禁用和模糊导航栏。

这是我的代码(导航栏),我会给你一些图片。

<nav class="navbar navbar-fixed-top">
<ul>
    <div class="nav-left">
        <li id="logo"><%= link_to "Univ TT", "/" %></li>
        <li class="btn-home"><%= link_to "시간표 생성", "/timetable/new" %></li>
        <li class="btn-home"><%= link_to "시간표 추천", "/recommend/index" %></li>
        <li class="btn-home"><%= link_to "빈강의실 검색", "/classroom/index" %></li>
    </div>
    <div class="nav-right">
        <% if !user_signed_in? %>
            <li class="btn-home"><%= link_to "회원가입", "/users/sign_up", data: { toggle: "modal", target: "#myModal" } %></li>
            <li class="btn-home"><%= link_to "로그인", "/users/sign_in",  data: { toggle: "modal", target: "#myModal" } %></li>
        <% else %>
            <% if current_user.admin? %>
                <li class="btn-home"><%= link_to "ADMIN", "/admin" %></li>
            <% end %>
            <li class="btn-home"><%= link_to "나의시간표", "/timetable/show/#{current_user.id}" %></li>
            <li class="btn-home"><%= link_to "로그아웃", "/users/sign_out", method: :delete %></li>
            <li class="username"><%= link_to current_user.username, "/users/edit" %></li>
        <% end %>
    </div>
</ul>
</nav>

当模态打开时。导航栏仍然有效。

【问题讨论】:

  • 您是否尝试将叠加层的 z-index 设置为高于导航栏的 z-index?

标签: css twitter-bootstrap bootstrap-modal


【解决方案1】:

看起来固定引导导航的默认 z-index 是 1030,因此请尝试将叠加层的 z-index 设置为大于 1030 的值。

【讨论】:

    猜你喜欢
    • 2011-06-03
    • 1970-01-01
    • 2011-10-08
    • 1970-01-01
    • 2021-09-27
    • 1970-01-01
    • 2013-03-19
    • 2018-01-27
    • 1970-01-01
    相关资源
    最近更新 更多