带模态的导航栏

Question

我正在使用 bootstrap。
我想将模态与导航栏一起使用。

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

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

这是我的代码（导航栏），我会给你一些图片。

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

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

Answer 1

固定 bootstrap 导航的默认 z-index 似乎是 1030，因此请尝试将叠加层的 z-index 设置为大于 1030 的值。

带模态的导航栏

Nav bar with modal

css

twitter-bootstrap

bootstrap-modal

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