4

navbar-search というフォームを使用しています。ナビゲーションバー内のリンクから開く「高度な検索」モーダルが必要です。

モーダル div を navbar のタグ内に配置すると、モーダルが開くと、通常はモーダル ウィンドウの外側にある暗い領域の背後にあります。任意の場所をクリックすると、モーダルと暗くなったマスクが閉じます。

モーダル div を navbar の外側 (つまり、フォームの外側) に移動することでこれを修正できますが、フォームの機能が壊れます。高度な検索モーダルは、ナビゲーション バーのフォーム フィールドの拡張機能として機能するはずですが、モーダルの問題を解決するために 2 つの異なるフォームを使用すると、フォームが連携しなくなります。それは理にかなっていますか？

ナビゲーション バー全体とモーダル (ナビゲーション バーの外側にある) をタグで囲むと、機能しますが、ナビゲーション バーの書式設定の一部が台無しになるため、これはあまりクリーンなソリューションではないと思います。

したがって、モーダル表示の問題を修正する方法か、フォームの状況を適切に機能させる方法が必要です (非表示フィールドなどに大量の重複マークアップを持たずに 2 つのフォームをリンクするなど)。

アイデアをありがとう！マット

これが私が今持っているものです（私は先に進み、後でcssを調整して物事を整列させました）。ブートストラップの navbar の使用方法によると、意味的に正しいとは思いませんが、私のフォームは正しく機能しており、それは私にとって大きな問題です。:)

<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 に答える