CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-modal
n8o
n8o

Reputation: 1943

Nav bar with modal

I'm using bootstrap.
I want to use modal with navbar.

When I clicked navbar, modal was opened.
But navbar was not disabled.
Navbar is still positioned top and it works.

I want navbar to be disabled and blurred when modal is opened.

Here is my code(navbar) and I will give you some pictures. 

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

enter image description here

When modal is opened. Navbar still works.

enter image description here

Upvotes: 0

Views: 816

Answers (1)

digiliooo
digiliooo

Reputation: 841

It looks like the default z-index for a fixed bootstrap nav is 1030, so try setting the z-index of your overlay to a value greater than 1030.

Upvotes: 1

Related Questions