導航欄中的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引導模式在面具後面打開

回答

相關問題