4

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

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

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

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

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

感谢您的任何想法！马特

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

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

1 回答 1

0

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

<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

于 2013-03-05T12:39:45.553 回答