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

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

如果我把模态div放在我的标签内的导航栏中，当模式打开时它是后面的通常在模态窗口之外的深色区域。点击任何地方关闭模式和黑暗的面具。

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

如果我将标记中的整个导航栏加上我的模态（它位于导航栏之外），它可以工作，但是会导致一些导航栏格式化，所以我认为这不是一个很干净的解决方案。

所以，我需要一种方法来修复模式显示问题或一种方法来使我的表单情况正常工作（例如，将两个表单连接在一起，而没有大量隐藏字段的重复标记等）。

感谢您的任何想法！马特

这是我现在（我已经提前，只是调整后的css使东西排队）。根据如何使用bootstrap的导航栏，我认为它在语义上是不正确的，但我的表单工作正常，对我来说这是一件大事。 :)

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

来源

2012-08-30 Matt

可以显示更多的html。你也可能想检查一下chrome inspector或者firebug中的z-index，然后尝试调整这些值并将它们添加到样式表中。您可能只需将另一个类添加到模态内容div中，并将该类设置为具有比覆盖更高的z-index。 – BillPull

我有点不确定你在问什么，但这是一个刺我想你问的东西。模态实际上并不需要将模态的代码放在窗体本身中。您需要在导航栏中唯一需要的是链接和触发器来激活模式。

<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-05 12:39:45 zmanc

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

回答

相关问题