不需要的搜索栏，带有 class 来自菜单栏的输入组出现在模式框上

Question

我设计的菜单栏 <nav>tag.This 菜单栏包含登录 link 和搜索字段。我以这样的方式编写代码，当我在菜单栏中单击登录时，模式框 appear.But 问题是 搜索字段 我已经包含在菜单栏中也出现在模态框中。

搜索字段代码

                  <form class="navbar-form navbar-right" action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="search">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>

                    </div>
                </form>

请帮我解决问题。感谢这里的 all.enter 图片描述

Answer 1

问题似乎出在您的 z-index 设置上。尝试将搜索栏的 z-index 更改为低于模态的 z-index。

.navbar-form {
   --
   --
   --
 position: absolute;
 z-index: -1;
}

.modalBox{
  --
  --
  --
 position: absolute;
 z-index: 100;
}

不需要的搜索栏，带有 class 来自菜单栏的输入组出现在模式框上

Unwanted search bar with class input group from menu bar appearing on modal box

html

javascript

css

twitter-bootstrap-3