Question

我正在使用表单navbar-search。我希望有一个＆＃34;高级搜索＆＃34;从导航栏中的链接打开的模态。

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

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

如果我将整个导航栏加上我的模态（在导航栏之外）包含在标签中，它可以工作但是会搞砸一些导航栏格式，所以我认为这不是一个非常干净的解决方案。 / p>
所以，我要么需要一种方法来修复模态显示问题，要么是一种使我的表单状态正常工作的方法（如同将两个表单链接在一起而没有大量重复标记用于隐藏字段等）。

感谢您的任何想法！马特

这就是我现在所拥有的（我已经过去了，之后只是调整了css以使事情排成一行）。根据bootstrap的导航栏应该如何使用，我不认为它在语义上是正确的，但是我的表格工作正常，这对我来说是个大问题。：）

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

Answer 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

导航栏中的twitter bootstrap模式在面具后面打开

1 个答案: