导航栏中的 twitter 引导模式在掩码后面打开答案

【问题标题】：twitter bootstrap modal in navbar opens behind mask导航栏中的 twitter 引导模式在掩码后面打开
【发布时间】：2012-08-30 15:03:07
【问题描述】：

我正在使用表单导航栏搜索。我想要一个从导航栏中的链接打开的“高级搜索”模式。

如果我将模态 div 放在导航栏中的标记内，则当模态打开时，它在通常位于模态窗口之外的深色区域。单击任意位置会关闭模式和变暗的蒙版。

我可以通过将模态 div 移到导航栏之外（因此，移到我的表单之外）来解决这个问题，但它会破坏我的表单功能。高级搜索模式应该直接在导航栏中用作表单字段的扩展，但如果我使用两种不同的表单来解决模式问题，这些表单将不再协同工作。这有意义吗？

如果我将整个导航栏加上我的模式（在导航栏之外）包含在一个标签中，它可以工作，但会破坏一些导航栏格式，所以我认为这不是一个非常干净的解决方案。

所以，我要么需要一种方法来解决模式显示问题，要么需要一种方法来使我的表单情况正常工作（例如，将两个表单链接在一起，而无需为隐藏字段等提供大量重复标记）。

感谢您的任何想法！马特

这就是我现在所拥有的（我已经开始了，之后只是调整了 css 以使事情排成一行）。根据应该如何使用引导程序的导航栏，我认为它在语义上不正确，但我的表单工作正常，这对我来说很重要。 :)

<form>
  <navbar></navbar>
  <modal></modal>
</form>

【问题讨论】：

你能显示更多的html吗？您也可能想检查 chrome 检查器或 firebug 中的 z-indexes，并尝试调整这些值并将它们添加到您的样式表中。您可能只需将另一个类添加到您的模态内容 div 并将该类设置为具有比叠加层高得多的 z-index。

标签： forms twitter-bootstrap modal-dialog

【解决方案1】：

我有点不确定你在问什么，但这只是我认为你在问什么。模态实际上并不需要将模态的代码放在表单本身中。导航栏中唯一需要的是链接和触发器激活模式。

<form>
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#myModal" role="button" data-toggle="modal">Advanced Search</a></li>
            </ul>
        </div>
    </div>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Advanced Search</h3>
    </div>
    <div class="modal-body">
        <p>Put your search fields here. </p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Search</button>
    </div>
</div>

查看工作链接。

http://jsbin.com/ifaqaj/1/edit

【讨论】：